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

Compare commits

base: florian:2d5962d7af8dd1031dceba08151090636623aceb
Branches Tags
florian:main florian:gradle-setup florian:trafic-logging florian:signals-conversion
..
compare: florian:gradle-setup
Branches Tags
florian:main florian:gradle-setup florian:trafic-logging florian:signals-conversion

2 Commits
2d5962d7af ... gradle-set

Author SHA1 Message Date
Florian THIERRY
9463ad5935 Change backend container image build. 2025-09-17 14:34:07 +02:00
Florian THIERRY
55d6a6328f Switch from maven to gradle. 2025-09-17 14:25:14 +02:00
128 changed files with 13038 additions and 6956 deletions
Expand all files Collapse all files

10
.gitignore vendored
View File

@@ -84,3 +84,13 @@ testem.log
Thumbs.db Thumbs.db
**/ci/bin/ **/ci/bin/
# Linux start script should use lf
/gradlew text eol=lf
# These are Windows script files and should use crlf
*.bat text eol=crlf
# Binary files should be left untouched
*.jar binary
**/.gradle

11
Dockerfile-backend
View File

@@ -1,15 +1,16 @@
FROM maven:3.9.11-eclipse-temurin-21 AS builder FROM gradle:9.0.0-jdk21 AS builder
WORKDIR /app WORKDIR /app
COPY backend/pom.xml /app/ COPY backend/gradlew /app/
COPY backend/build.gradle.kts /app/
COPY backend/settings.gradle.kts /app/
COPY backend/codiki-application /app/codiki-application COPY backend/codiki-application /app/codiki-application
COPY backend/codiki-domain /app/codiki-domain COPY backend/codiki-domain /app/codiki-domain
COPY backend/codiki-exposition /app/codiki-exposition COPY backend/codiki-exposition /app/codiki-exposition
COPY backend/codiki-infrastructure /app/codiki-infrastructure COPY backend/codiki-infrastructure /app/codiki-infrastructure
COPY backend/codiki-launcher /app/codiki-launcher COPY backend/codiki-launcher /app/codiki-launcher
WORKDIR /app WORKDIR /app
RUN mvn clean install -N RUN gradle build jar
RUN mvn clean package
FROM eclipse-temurin:21-jre-alpine AS final FROM eclipse-temurin:21-jre-alpine AS final
COPY --from=builder /app/codiki-launcher/target/*.jar /app/codiki.jar COPY --from=builder /app/codiki-launcher/build/libs/codiki-launcher.jar /app/codiki.jar
CMD ["java", "-jar", "/app/codiki.jar"] CMD ["java", "-jar", "/app/codiki.jar"]

2
Dockerfile-frontend
View File

@@ -1,4 +1,4 @@
FROM node:25-alpine AS builder FROM node:24-alpine AS builder
WORKDIR /app WORKDIR /app
COPY frontend /app COPY frontend /app
RUN npm install RUN npm install

56
backend/build.gradle.kts Normal file
View File

@@ -0,0 +1,56 @@
plugins {
kotlin("jvm") version "2.2.20"
kotlin("plugin.spring") version "2.2.20"
id("io.spring.dependency-management") version "1.1.7"
}
group = "org.codiki"
version = "0.0.1-SNAPSHOT"
java {
toolchain {
languageVersion = JavaLanguageVersion.of(21)
}
}
repositories {
mavenCentral()
}
subprojects {
apply(plugin = "java")
apply(plugin = "org.jetbrains.kotlin.jvm")
repositories {
mavenCentral()
}
dependencies {
implementation(platform("org.springframework.boot:spring-boot-dependencies:3.5.5"))
compileOnly("org.projectlombok:lombok:1.18.40")
annotationProcessor("org.projectlombok:lombok:1.18.40")
testImplementation("org.assertj:assertj-core:3.27.4")
testImplementation("org.junit.jupiter:junit-jupiter-api")
testImplementation("org.junit.jupiter:junit-jupiter-params")
}
tasks.withType<Test> {
useJUnitPlatform()
}
}
dependencyManagement {
imports {
mavenBom("org.springframework.boot:spring-boot-dependencies:3.5.5")
}
}
kotlin {
compilerOptions {
freeCompilerArgs.addAll("-Xjsr305=strict")
}
}
tasks.withType<Test> {
useJUnitPlatform()
}

11
backend/codiki-application/build.gradle.kts Normal file
View File

@@ -0,0 +1,11 @@
plugins {
id("io.spring.dependency-management") version "1.1.7"
}
dependencies {
implementation(project(":codiki-domain"))
implementation("org.springframework:spring-context")
implementation("org.springframework.boot:spring-boot-starter-security")
implementation("com.auth0:java-jwt:4.5.0")
implementation("org.apache.commons:commons-lang3") //:3.18.0
}

56
backend/codiki-application/pom.xml
View File

@@ -1,56 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.codiki</groupId>
<artifactId>codiki-parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<artifactId>codiki-application</artifactId>
<name>codiki-application</name>
<description>Demo project for Spring Boot</description>
<packaging>jar</packaging>
<dependencies>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-domain</artifactId>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
</dependency>
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter-api</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter-params</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.assertj</groupId>
<artifactId>assertj-core</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
</project>

0
backend/codiki-domain/build.gradle.kts Normal file
View File

30
backend/codiki-domain/pom.xml
View File

@@ -1,30 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.codiki</groupId>
<artifactId>codiki-parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<artifactId>codiki-domain</artifactId>
<name>codiki-domain</name>
<description>Demo project for Spring Boot</description>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>16</source>
<target>16</target>
</configuration>
</plugin>
</plugins>
</build>
<packaging>jar</packaging>
</project>

11
backend/codiki-exposition/build.gradle.kts Normal file
View File

@@ -0,0 +1,11 @@
plugins {
id("io.spring.dependency-management") version "1.1.7"
}
dependencies {
implementation(project(":codiki-application"))
implementation(project(":codiki-domain"))
implementation("org.springframework.boot:spring-boot-starter-web")
implementation("org.springframework.boot:spring-boot-starter-security")
implementation("org.apache.tika:tika-core:3.2.3")
}

37
backend/codiki-exposition/pom.xml
View File

@@ -1,37 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.codiki</groupId>
<artifactId>codiki-parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<artifactId>codiki-exposition</artifactId>
<name>codiki-exposition</name>
<description>Demo project for Spring Boot</description>
<packaging>jar</packaging>
<dependencies>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-application</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>org.apache.tika</groupId>
<artifactId>tika-core</artifactId>
</dependency>
</dependencies>
</project>

2
backend/codiki-exposition/src/main/java/org/codiki/exposition/configuration/security/SecurityConfiguration.java
View File

@@ -29,7 +29,7 @@ public class SecurityConfiguration {
public SecurityFilterChain securityFilterChain( public SecurityFilterChain securityFilterChain(
HttpSecurity httpSecurity, HttpSecurity httpSecurity,
JwtAuthenticationFilter jwtAuthenticationFilter JwtAuthenticationFilter jwtAuthenticationFilter
) { ) throws Exception {
httpSecurity httpSecurity
.csrf(AbstractHttpConfigurer::disable) .csrf(AbstractHttpConfigurer::disable)
.httpBasic(Customizer.withDefaults()) .httpBasic(Customizer.withDefaults())

13
backend/codiki-infrastructure/build.gradle.kts Normal file
View File

@@ -0,0 +1,13 @@
plugins {
id("io.spring.dependency-management") version "1.1.7"
// kotlin("plugin.jpa") version "2.1.20"
}
dependencies {
// implementation(kotlin("stdlib"))
implementation(project(":codiki-application"))
implementation(project(":codiki-domain"))
implementation("org.springframework:spring-context")
implementation("org.springframework.boot:spring-boot-starter-data-jpa")
implementation("org.postgresql:postgresql:42.7.5")
}

60
backend/codiki-infrastructure/pom.xml
View File

@@ -1,60 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.codiki</groupId>
<artifactId>codiki-parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<artifactId>codiki-infrastructure</artifactId>
<name>codiki-infrastructure</name>
<description>Demo project for Spring Boot</description>
<packaging>jar</packaging>
<dependencies>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-domain</artifactId>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>org.postgresql</groupId>
<artifactId>postgresql</artifactId>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
</dependency>
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter-api</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter-params</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.assertj</groupId>
<artifactId>assertj-core</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
</project>

2
backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/configuration/JpaConfiguration.java
View File

@@ -1,6 +1,6 @@
package org.codiki.infrastructure.configuration; package org.codiki.infrastructure.configuration;
import org.springframework.boot.persistence.autoconfigure.EntityScan; import org.springframework.boot.autoconfigure.domain.EntityScan;
import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.Configuration;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories; import org.springframework.data.jpa.repository.config.EnableJpaRepositories;

17
backend/codiki-launcher/build.gradle.kts Normal file
View File

@@ -0,0 +1,17 @@
plugins {
id("org.springframework.boot") version "3.5.5"
id("io.spring.dependency-management") version "1.1.7"
}
dependencies {
implementation(project(":codiki-domain"))
implementation(project(":codiki-application"))
implementation(project(":codiki-infrastructure"))
implementation(project(":codiki-exposition"))
implementation("org.springframework.boot:spring-boot-starter-web")
implementation("org.springframework.boot:spring-boot-devtools")
}
springBoot {
mainClass = "org.codiki.launcher.ApplicationLauncher"
}

57
backend/codiki-launcher/pom.xml
View File

@@ -1,57 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.codiki</groupId>
<artifactId>codiki-parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<artifactId>codiki-launcher</artifactId>
<name>codiki-launcher</name>
<description>Demo project for Spring Boot</description>
<packaging>jar</packaging>
<dependencies>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-exposition</artifactId>
</dependency>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-application</artifactId>
</dependency>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-domain</artifactId>
</dependency>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-infrastructure</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>

4
backend/codiki-launcher/src/main/resources/application-local.yml
View File

@@ -1,7 +1,7 @@
application: application:
pictures: pictures:
path: /home/florian/Developpement/codiki-hexagonal/backend/pictures-folder/ path: /Users/florian/Documents/Developpement/codiki-hexagonal/backend/pictures-folder/
temp-path : /home/florian/Developpement/codiki-hexagonal/backend/pictures-folder/temp/ temp-path : /Users/florian/Documents/Developpement/codiki-hexagonal/backend/pictures-folder/temp/
logging: logging:
level: level:

2
backend/docker-compose.yml
View File

@@ -3,7 +3,7 @@ version: '3.9'
services: services:
codiki-database: codiki-database:
container_name: "codiki-database" container_name: "codiki-database"
image: "postgres:16" image: "postgres:17"
ports: ports:
- "50001:5432" - "50001:5432"
networks: networks:

251
backend/gradlew vendored Executable file
View File

@@ -0,0 +1,251 @@
#!/bin/sh
#
# Copyright © 2015 the original authors.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# https://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
# SPDX-License-Identifier: Apache-2.0
#
##############################################################################
#
# Gradle start up script for POSIX generated by Gradle.
#
# Important for running:
#
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
# noncompliant, but you have some other compliant shell such as ksh or
# bash, then to run this script, type that shell name before the whole
# command line, like:
#
# ksh Gradle
#
# Busybox and similar reduced shells will NOT work, because this script
# requires all of these POSIX shell features:
# * functions;
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
# * compound commands having a testable exit status, especially «case»;
# * various built-in commands including «command», «set», and «ulimit».
#
# Important for patching:
#
# (2) This script targets any POSIX shell, so it avoids extensions provided
# by Bash, Ksh, etc; in particular arrays are avoided.
#
# The "traditional" practice of packing multiple parameters into a
# space-separated string is a well documented source of bugs and security
# problems, so this is (mostly) avoided, by progressively accumulating
# options in "$@", and eventually passing that to Java.
#
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
# see the in-line comments for details.
#
# There are tweaks for specific operating systems such as AIX, CygWin,
# Darwin, MinGW, and NonStop.
#
# (3) This script is generated from the Groovy template
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
# within the Gradle project.
#
# You can find Gradle at https://github.com/gradle/gradle/.
#
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
app_path=$0
# Need this for daisy-chained symlinks.
while
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
[ -h "$app_path" ]
do
ls=$( ls -ld "$app_path" )
link=${ls#*' -> '}
case $link in #(
/*) app_path=$link ;; #(
*) app_path=$APP_HOME$link ;;
esac
done
# This is normally unused
# shellcheck disable=SC2034
APP_BASE_NAME=${0##*/}
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD=maximum
warn () {
echo "$*"
} >&2
die () {
echo
echo "$*"
echo
exit 1
} >&2
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "$( uname )" in #(
CYGWIN* ) cygwin=true ;; #(
Darwin* ) darwin=true ;; #(
MSYS* | MINGW* ) msys=true ;; #(
NONSTOP* ) nonstop=true ;;
esac
CLASSPATH="\\\"\\\""
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD=$JAVA_HOME/jre/sh/java
else
JAVACMD=$JAVA_HOME/bin/java
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD=java
if ! command -v java >/dev/null 2>&1
then
die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
fi
# Increase the maximum file descriptors if we can.
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
case $MAX_FD in #(
max*)
# In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
MAX_FD=$( ulimit -H -n ) ||
warn "Could not query maximum file descriptor limit"
esac
case $MAX_FD in #(
'' | soft) :;; #(
*)
# In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
# shellcheck disable=SC2039,SC3045
ulimit -n "$MAX_FD" ||
warn "Could not set maximum file descriptor limit to $MAX_FD"
esac
fi
# Collect all arguments for the java command, stacking in reverse order:
# * args from the command line
# * the main class name
# * -classpath
# * -D...appname settings
# * --module-path (only if needed)
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
# For Cygwin or MSYS, switch paths to Windows format before running java
if "$cygwin" || "$msys" ; then
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
JAVACMD=$( cygpath --unix "$JAVACMD" )
# Now convert the arguments - kludge to limit ourselves to /bin/sh
for arg do
if
case $arg in #(
-*) false ;; # don't mess with options #(
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
[ -e "$t" ] ;; #(
*) false ;;
esac
then
arg=$( cygpath --path --ignore --mixed "$arg" )
fi
# Roll the args list around exactly as many times as the number of
# args, so each arg winds up back in the position where it started, but
# possibly modified.
#
# NB: a `for` loop captures its iteration list before it begins, so
# changing the positional parameters here affects neither the number of
# iterations, nor the values presented in `arg`.
shift # remove old arg
set -- "$@" "$arg" # push replacement arg
done
fi
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Collect all arguments for the java command:
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
# and any embedded shellness will be escaped.
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
# treated as '${Hostname}' itself on the command line.
set -- \
"-Dorg.gradle.appname=$APP_BASE_NAME" \
-classpath "$CLASSPATH" \
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
"$@"
# Stop when "xargs" is not available.
if ! command -v xargs >/dev/null 2>&1
then
die "xargs is not available"
fi
# Use "xargs" to parse quoted args.
#
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
#
# In Bash we could simply go:
#
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
# set -- "${ARGS[@]}" "$@"
#
# but POSIX shell has neither arrays nor command substitution, so instead we
# post-process each arg (as a line of input to sed) to backslash-escape any
# character that might be a shell metacharacter, then use eval to reverse
# that process (while maintaining the separation between arguments), and wrap
# the whole thing up as a single "set" statement.
#
# This will of course break if any of these variables contains a newline or
# an unmatched quote.
#
eval "set -- $(
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
xargs -n1 |
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
tr '\n' ' '
)" '"$@"'
exec "$JAVACMD" "$@"

94
backend/gradlew.bat vendored Normal file
View File

@@ -0,0 +1,94 @@
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@rem SPDX-License-Identifier: Apache-2.0
@rem
@if "%DEBUG%"=="" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%"=="" set DIRNAME=.
@rem This is normally unused
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if %ERRORLEVEL% equ 0 goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto execute
echo. 1>&2
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
echo. 1>&2
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
echo location of your Java installation. 1>&2
goto fail
:execute
@rem Setup the command line
set CLASSPATH=
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
:end
@rem End local scope for the variables with windows NT shell
if %ERRORLEVEL% equ 0 goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
set EXIT_CODE=%ERRORLEVEL%
if %EXIT_CODE% equ 0 set EXIT_CODE=1
if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
exit /b %EXIT_CODE%
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega

98
backend/pom.xml
View File

@@ -1,98 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.codiki</groupId>
<artifactId>codiki-parent</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>pom</packaging>
<name>codiki</name>
<properties>
<java.version>21</java.version>
<maven.compiler.source>21</maven.compiler.source>
<maven.compiler.target>21</maven.compiler.target>
<jakarta.servlet-api.version>6.1.0</jakarta.servlet-api.version>
<java-jwt.version>4.5.0</java-jwt.version>
<postgresql.version>42.7.8</postgresql.version>
<tika-core.version>3.2.3</tika-core.version>
<commons-lang3.version>3.20.0</commons-lang3.version>
</properties>
<modules>
<module>codiki-domain</module>
<module>codiki-application</module>
<module>codiki-infrastructure</module>
<module>codiki-exposition</module>
<module>codiki-launcher</module>
</modules>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>4.0.1</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-exposition</artifactId>
<version>${project.version}</version>
</dependency>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-application</artifactId>
<version>${project.version}</version>
</dependency>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-domain</artifactId>
<version>${project.version}</version>
</dependency>
<dependency>
<groupId>org.codiki</groupId>
<artifactId>codiki-infrastructure</artifactId>
<version>${project.version}</version>
</dependency>
<dependency>
<groupId>jakarta.servlet</groupId>
<artifactId>jakarta.servlet-api</artifactId>
<version>${jakarta.servlet-api.version}</version>
</dependency>
<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>${java-jwt.version}</version>
</dependency>
<dependency>
<groupId>org.postgresql</groupId>
<artifactId>postgresql</artifactId>
<version>${postgresql.version}</version>
</dependency>
<dependency>
<groupId>org.apache.tika</groupId>
<artifactId>tika-core</artifactId>
<version>${tika-core.version}</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>${commons-lang3.version}</version>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>

2
backend/settings.gradle.kts Normal file
View File

@@ -0,0 +1,2 @@
rootProject.name = "codiki-backend"
include("codiki-domain", "codiki-application", "codiki-exposition", "codiki-infrastructure", "codiki-launcher")

38
frontend/angular.json
View File

@@ -24,13 +24,13 @@
}, },
"architect": { "architect": {
"build": { "build": {
"builder": "@angular/build:application", "builder": "@angular-devkit/build-angular:application",
"options": { "options": {
"outputPath": "dist/codiki", "outputPath": "dist/codiki",
"index": "src/index.html", "index": "src/index.html",
"browser": "src/main.ts", "browser": "src/main.ts",
"polyfills": [ "polyfills": [
"@angular/localize/init" "zone.js"
], ],
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
@@ -102,7 +102,7 @@
"defaultConfiguration": "" "defaultConfiguration": ""
}, },
"serve": { "serve": {
"builder": "@angular/build:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"configurations": { "configurations": {
"production-en": { "production-en": {
"buildTarget": "codiki:build:production-en" "buildTarget": "codiki:build:production-en"
@@ -123,15 +123,17 @@
"defaultConfiguration": "development" "defaultConfiguration": "development"
}, },
"extract-i18n": { "extract-i18n": {
"builder": "@angular/build:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"buildTarget": "codiki:build" "buildTarget": "codiki:build"
} }
}, },
"test": { "test": {
"builder": "@angular/build:karma", "builder": "@angular-devkit/build-angular:karma",
"options": { "options": {
"polyfills": [ "polyfills": [
"zone.js",
"zone.js/testing"
], ],
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
@@ -151,31 +153,5 @@
}, },
"cli": { "cli": {
"analytics": false "analytics": false
},
"schematics": {
"@schematics/angular:component": {
"type": "component"
},
"@schematics/angular:directive": {
"type": "directive"
},
"@schematics/angular:service": {
"type": "service"
},
"@schematics/angular:guard": {
"typeSeparator": "."
},
"@schematics/angular:interceptor": {
"typeSeparator": "."
},
"@schematics/angular:module": {
"typeSeparator": "."
},
"@schematics/angular:pipe": {
"typeSeparator": "."
},
"@schematics/angular:resolver": {
"typeSeparator": "."
}
} }
} }

13017
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

44
frontend/package.json
View File

@@ -17,26 +17,32 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^21.1.2", "@angular/animations": "^18.2.5",
"@angular/cdk": "^21.1.2", "@angular/cdk": "^18.2.5",
"@angular/common": "^21.1.2", "@angular/common": "^18.2.5",
"@angular/compiler": "^21.1.2", "@angular/compiler": "^18.2.5",
"@angular/core": "^21.1.2", "@angular/core": "^18.2.5",
"@angular/forms": "^21.1.2", "@angular/forms": "^18.2.5",
"@angular/material": "^21.1.2", "@angular/material": "^18.2.5",
"@angular/platform-browser": "^21.1.2", "@angular/platform-browser": "^18.2.5",
"@angular/platform-browser-dynamic": "^21.1.2", "@angular/platform-browser-dynamic": "^18.2.5",
"@angular/router": "^21.1.2", "@angular/router": "^18.2.5",
"rxjs": "~7.8.2", "rxjs": "~7.8.0",
"tslib": "^2.8.1" "tslib": "^2.3.0",
"zone.js": "~0.14.10"
}, },
"devDependencies": { "devDependencies": {
"@angular/build": "^21.1.2", "@angular-devkit/build-angular": "^18.2.5",
"@angular/cli": "^21.1.2", "@angular/cli": "^18.2.5",
"@angular/compiler-cli": "^21.1.2", "@angular/compiler-cli": "^18.2.5",
"@angular/localize": "^21.1.2", "@angular/localize": "^18.2.5",
"@types/jasmine": "~5.1.15", "@types/jasmine": "~5.1.0",
"jasmine-core": "~5.13.0", "jasmine-core": "~5.1.0",
"typescript": "~5.9.3" "karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.5.4"
} }
} }

4
frontend/src/app/app.component.spec.ts
View File

@@ -1,5 +1,5 @@
import {TestBed} from '@angular/core/testing'; import { TestBed } from '@angular/core/testing';
import {AppComponent} from './app.component'; import { AppComponent } from './app.component';
describe('AppComponent', () => { describe('AppComponent', () => {
beforeEach(async () => { beforeEach(async () => {

11
frontend/src/app/app.component.ts
View File

@@ -1,11 +1,14 @@
import {Component} from '@angular/core'; import { CommonModule } from '@angular/common';
import {RouterOutlet} from '@angular/router'; import { Component } from '@angular/core';
import {HeaderComponent} from './components/header/header.component'; import { RouterOutlet } from '@angular/router';
import {FooterComponent} from './components/footer/footer.component'; import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
standalone: true,
imports: [ imports: [
CommonModule,
RouterOutlet, RouterOutlet,
HeaderComponent, HeaderComponent,
FooterComponent FooterComponent

26
frontend/src/app/app.config.ts
View File

@@ -1,11 +1,11 @@
import {ApplicationConfig, inject, provideAppInitializer} from '@angular/core'; import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
import {provideRouter, withRouterConfig} from '@angular/router'; import { provideRouter, withRouterConfig } from '@angular/router';
import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http'; import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import {provideAnimationsAsync} from '@angular/platform-browser/animations/async'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import {routes} from './app.routes'; import { routes } from './app.routes';
import {JwtInterceptor} from './core/interceptor/jwt.interceptor'; import { JwtInterceptor } from './core/interceptor/jwt.interceptor';
import {AuthenticationService} from './core/service/authentication.service'; import { AuthenticationService } from './core/service/authentication.service';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [ providers: [
@@ -18,10 +18,12 @@ export const appConfig: ApplicationConfig = {
), ),
provideAnimationsAsync(), provideAnimationsAsync(),
provideHttpClient(withInterceptorsFromDi()), provideHttpClient(withInterceptorsFromDi()),
{provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}, { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
provideAppInitializer(() => { {
const initializerFn = ((authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess())(inject(AuthenticationService)); provide: APP_INITIALIZER,
return initializerFn(); useFactory: (authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess(),
}) deps: [AuthenticationService],
multi: true
}
] ]
}; };

4
frontend/src/app/app.routes.ts
View File

@@ -1,5 +1,5 @@
import {Routes} from '@angular/router'; import { Routes } from '@angular/router';
import {alreadyAuthenticatedGuard} from './core/guard/already-authenticated.guard'; import { alreadyAuthenticatedGuard } from './core/guard/already-authenticated.guard';
export const routes: Routes = [ export const routes: Routes = [
{ {

4
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html
View File

@@ -1,5 +1,5 @@
<h1>{{ title }}</h1> <h1>{{title}}</h1>
<h2>{{ description }}</h2> <h2>{{description}}</h2>
<footer> <footer>
<button type="button" class="cod-button secondary" (click)="closeDialog()" matRipple i18n> <button type="button" class="cod-button secondary" (click)="closeDialog()" matRipple i18n>
No No

7
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts
View File

@@ -1,6 +1,6 @@
import {Component, inject} from "@angular/core"; import { Component, inject, Input } from "@angular/core";
import {MatRippleModule} from "@angular/material/core"; import { MatRippleModule } from "@angular/material/core";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
export interface ConfirmationDialogData { export interface ConfirmationDialogData {
title: string; title: string;
@@ -9,6 +9,7 @@ export interface ConfirmationDialogData {
@Component({ @Component({
selector: 'app-confirmation-dialog', selector: 'app-confirmation-dialog',
standalone: true,
templateUrl: './confirmation-dialog.component.html', templateUrl: './confirmation-dialog.component.html',
styleUrl: './confirmation-dialog.component.scss', styleUrl: './confirmation-dialog.component.scss',
imports: [MatRippleModule] imports: [MatRippleModule]

4
frontend/src/app/components/footer/footer.component.html
View File

@@ -1,8 +1,8 @@
<div i18n> <div i18n>
<span class="copy-left">&copy;</span> <span class="copy-left">&copy;</span>
2016 - 2026 All rights reserved 2016 - 2024 All rights reserved
- -
2.2 2.1
<a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip> <a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
<mat-icon>favorite</mat-icon> <mat-icon>favorite</mat-icon>
</a> </a>

6
frontend/src/app/components/footer/footer.component.scss
View File

@@ -1,6 +1,6 @@
:host { :host {
background-color: #3f51b5; background-color: #3f51b5;
color: rgba(255, 255, 255, .6); color: rgba(255,255,255,.6);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
@@ -12,15 +12,13 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: .2em;
.copy-left { .copy-left {
transform: rotate(180deg); transform: rotate(180deg);
} }
a { a {
text-decoration: none; text-decoration: none;
color: rgba(255, 255, 255, .6); color: rgba(255,255,255,.6);
} }
mat-icon { mat-icon {

10
frontend/src/app/components/footer/footer.component.ts
View File

@@ -1,13 +1,15 @@
import {Component} from '@angular/core'; import { Component } from '@angular/core';
import {MatIconModule} from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import {RouterModule} from '@angular/router'; import { RouterModule } from '@angular/router';
@Component({ @Component({
selector: 'app-footer', selector: 'app-footer',
standalone: true,
imports: [MatIconModule, MatTooltipModule, RouterModule], imports: [MatIconModule, MatTooltipModule, RouterModule],
templateUrl: './footer.component.html', templateUrl: './footer.component.html',
styleUrl: './footer.component.scss' styleUrl: './footer.component.scss'
}) })
export class FooterComponent { export class FooterComponent {
} }

2
frontend/src/app/components/header/header.component.scss
View File

@@ -8,7 +8,7 @@ $headerHeight: 3.5em;
color: white; color: white;
position: relative; position: relative;
height: $headerHeight; height: $headerHeight;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
div { div {
display: flex; display: flex;

29
frontend/src/app/components/header/header.component.ts
View File

@@ -1,18 +1,21 @@
import {Component, inject} from '@angular/core'; import { CommonModule } from '@angular/common';
import {FormControl, ReactiveFormsModule} from '@angular/forms'; import { Component, inject } from '@angular/core';
import {MatButtonModule} from '@angular/material/button'; import { FormControl, ReactiveFormsModule } from '@angular/forms';
import {MatRippleModule} from '@angular/material/core'; import { MatButtonModule } from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon'; import { MatRippleModule } from '@angular/material/core';
import {MatMenuModule} from '@angular/material/menu'; import { MatIconModule } from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatMenuModule } from '@angular/material/menu';
import {RouterModule} from '@angular/router'; import { MatTooltipModule } from '@angular/material/tooltip';
import {AuthenticationService} from '../../core/service/authentication.service'; import { RouterModule } from '@angular/router';
import {PublicationsSearchBarComponent} from '../publications-search-bar/publications-search-bar.component'; import { AuthenticationService } from '../../core/service/authentication.service';
import {SideMenuComponent} from '../side-menu/side-menu.component'; import { PublicationsSearchBarComponent } from '../publications-search-bar/publications-search-bar.component';
import { SideMenuComponent } from '../side-menu/side-menu.component';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
standalone: true,
imports: [ imports: [
CommonModule,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
MatMenuModule, MatMenuModule,
@@ -21,10 +24,10 @@ import {SideMenuComponent} from '../side-menu/side-menu.component';
PublicationsSearchBarComponent, PublicationsSearchBarComponent,
ReactiveFormsModule, ReactiveFormsModule,
RouterModule, RouterModule,
SideMenuComponent SideMenuComponent,
], ],
templateUrl: './header.component.html', templateUrl: './header.component.html',
styleUrl: './header.component.scss' styleUrl: './header.component.scss',
}) })
export class HeaderComponent { export class HeaderComponent {
private authenticationService = inject(AuthenticationService); private authenticationService = inject(AuthenticationService);

4
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html
View File

@@ -14,9 +14,9 @@
<mat-form-field> <mat-form-field>
<mat-label i18n>Programming language</mat-label> <mat-label i18n>Programming language</mat-label>
<mat-select #programmingLanguageSelect formControlName="programmingLanguage"> <mat-select #programmingLanguageSelect formControlName="programmingLanguage">
@for (programmingLanguage of programmingLanguages; track programmingLanguage) { @for(programmingLanguage of programmingLanguages; track programmingLanguage) {
<mat-option [value]="programmingLanguage.code"> <mat-option [value]="programmingLanguage.code">
{{ programmingLanguage.label }} {{programmingLanguage.label}}
</mat-option> </mat-option>
} }
</mat-select> </mat-select>

19
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts
View File

@@ -1,12 +1,12 @@
import {Component, inject} from "@angular/core"; import { Component, inject } from "@angular/core";
import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
import {MatRippleModule} from "@angular/material/core"; import { MatRippleModule } from "@angular/material/core";
import {MatDialogRef} from "@angular/material/dialog"; import { MatDialogRef } from "@angular/material/dialog";
import {MatFormFieldModule} from "@angular/material/form-field"; import { MatFormFieldModule } from "@angular/material/form-field";
import {MatIcon} from "@angular/material/icon"; import { MatIcon } from "@angular/material/icon";
import {MatInputModule} from "@angular/material/input"; import { MatInputModule } from "@angular/material/input";
import {MatSelectModule} from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import {MatTooltip} from "@angular/material/tooltip"; import { MatTooltip } from "@angular/material/tooltip";
export interface ProgramingLanguage { export interface ProgramingLanguage {
code: string; code: string;
@@ -86,6 +86,7 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
@Component({ @Component({
selector: 'app-code-block-dialog', selector: 'app-code-block-dialog',
standalone: true,
templateUrl: './code-block-dialog.component.html', templateUrl: './code-block-dialog.component.html',
styleUrl: './code-block-dialog.component.scss', styleUrl: './code-block-dialog.component.scss',
imports: [ imports: [

7
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html
View File

@@ -10,14 +10,13 @@
<h1 i18n>Select an illustration</h1> <h1 i18n>Select an illustration</h1>
</header> </header>
<div class="picture-container"> <div class="picture-container">
@if (isLoading()) { @if (isLoading) {
<h2 i18n>Pictures loading...</h2> <h2 i18n>Pictures loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
} @else { } @else {
@if (pictures.length) { @if (pictures.length) {
@for (picture of pictures; track picture) { @for(picture of pictures; track picture) {
<img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration" <img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration" i18n-matTooltip/>
i18n-matTooltip/>
} }
} @else { } @else {
<h2 i18n>There is no any picture.</h2> <h2 i18n>There is no any picture.</h2>

4
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss
View File

@@ -32,13 +32,13 @@
object-fit: cover; object-fit: cover;
border-radius: 1em; border-radius: 1em;
opacity: .9; opacity: .9;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out; transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24); box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
} }
} }
} }

35
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts
View File

@@ -1,15 +1,16 @@
import {Component, inject, OnInit, signal} from "@angular/core"; import { Component, inject, OnInit } from "@angular/core";
import {Picture} from "../../../core/rest-services/picture/model/picture"; import { Picture } from "../../../core/rest-services/picture/model/picture";
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBar} from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service"; import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
import {MatIcon} from "@angular/material/icon"; import { MatIcon } from "@angular/material/icon";
import {MatDialogRef} from "@angular/material/dialog"; import { MatDialogRef } from "@angular/material/dialog";
import {MatRippleModule} from '@angular/material/core'; import {MatRippleModule} from '@angular/material/core';
import {MatTooltip} from "@angular/material/tooltip"; import { MatTooltip } from "@angular/material/tooltip";
@Component({ @Component({
selector: 'app-picture-selection', selector: 'app-picture-selection',
standalone: true,
templateUrl: './picture-selection-dialog.component.html', templateUrl: './picture-selection-dialog.component.html',
styleUrl: './picture-selection-dialog.component.scss', styleUrl: './picture-selection-dialog.component.scss',
imports: [ imports: [
@@ -17,19 +18,19 @@ import {MatTooltip} from "@angular/material/tooltip";
MatRippleModule, MatRippleModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatTooltip MatTooltip
] ],
}) })
export class PictureSelectionDialog implements OnInit { export class PictureSelectionDialog implements OnInit {
private readonly pictureRestService = inject(PictureRestService); private readonly pictureRestService = inject(PictureRestService);
private readonly snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>); private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
isLoading = signal(false); isLoading: boolean = false;
isLoaded = signal(false); isLoaded: boolean = false;
pictures: Picture[] = []; pictures: Picture[] = [];
ngOnInit(): void { ngOnInit(): void {
this.isLoading.set(true); this.isLoading = true;
this.pictureRestService.getAllOfCurrentUser() this.pictureRestService.getAllOfCurrentUser()
.then(pictures => { .then(pictures => {
this.pictures = pictures; this.pictures = pictures;
@@ -38,14 +39,14 @@ export class PictureSelectionDialog implements OnInit {
if (error.status === 401) { if (error.status === 401) {
this.dialogRef.close(); this.dialogRef.close();
} else { } else {
const errorMessage = $localize`An error occurred while loading pictures.`; const errorMessage = $localize`An error occured while loading pictures.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
} }
}) })
.finally(() => { .finally(() => {
this.isLoading.set(false); this.isLoading = false;
this.isLoaded.set(true); this.isLoaded = true;
}); });
} }
@@ -65,9 +66,9 @@ export class PictureSelectionDialog implements OnInit {
this.dialogRef.close(pictureId); this.dialogRef.close(pictureId);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`A technical error occurred while uploading your picture.`; const errorMessage = $localize`A technical error occured while uploading your picture.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
}); });
} }
} }

12
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.service.ts
View File

@@ -1,8 +1,8 @@
import {inject, Injectable} from "@angular/core"; import { inject, Injectable } from "@angular/core";
import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service"; import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
import {MatSnackBar} from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import {MatDialogRef} from "@angular/material/dialog"; import { MatDialogRef } from "@angular/material/dialog";
import {PictureSelectionDialog} from "./picture-selection-dialog.component"; import { PictureSelectionDialog } from "./picture-selection-dialog.component";
@Injectable() @Injectable()
export class PictureSelectionDialogService { export class PictureSelectionDialogService {
@@ -18,7 +18,7 @@ export class PictureSelectionDialogService {
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occured while uploading a picture...`; const errorMessage = $localize`An error occured while uploading a picture...`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
}); });
} }
} }

21
frontend/src/app/components/publication-edition/publication-edition.component.html
View File

@@ -1,6 +1,6 @@
<form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate> <form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
<header> <header>
<h1>{{ title() }}</h1> <h1>{{title}}</h1>
</header> </header>
<mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)"> <mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
@@ -10,11 +10,11 @@
<div> <div>
<mat-form-field> <mat-form-field>
<mat-label i18n>Title</mat-label> <mat-label i18n>Title</mat-label>
<input matInput type="text" formControlName="title"/> <input matInput type="text" formControlName="title" />
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label i18n>Description</mat-label> <mat-label i18n>Description</mat-label>
<input matInput type="text" formControlName="description"/> <input matInput type="text" formControlName="description" />
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label i18n>Category</mat-label> <mat-label i18n>Category</mat-label>
@@ -29,8 +29,7 @@
</div> </div>
<div class="picture-container"> <div class="picture-container">
<img <img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'"
[src]="publication().illustrationId.length ? '/api/pictures/' + publication().illustrationId : '/assets/images/default-picture.png'"
(click)="displayPictureSectionDialog()" (click)="displayPictureSectionDialog()"
matTooltip="Click to change illustration" matTooltip="Click to change illustration"
i18n-matTooltip/> i18n-matTooltip/>
@@ -104,24 +103,24 @@
<mat-tab label="Previewing" i18n-label> <mat-tab label="Previewing" i18n-label>
<div class="preview"> <div class="preview">
@if (isPreviewing()) { @if ((isPreviewing$ | async) === true) {
<div class="preview-loading"> <div class="preview-loading">
<h2 i18n>Preview is loading...</h2> <h2 i18n>Preview is loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
</div> </div>
} @else { } @else {
<img class="illustration" src="/api/pictures/{{ publication().illustrationId }}"/> <img class="illustration" src="/api/pictures/{{ publication.illustrationId }}" />
<header> <header>
<h1>{{ publication().title }}</h1> <h1>{{ publication.title }}</h1>
<h2>{{ publication().description }}</h2> <h2>{{ publication.description }}</h2>
</header> </header>
<main [innerHTML]="publicationInEdition().parsedText"></main> <main [innerHTML]="publicationInEdition.parsedText"></main>
} }
</div> </div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
<footer> <footer>
<app-submit-button [requestPending]="isSaving()" i18n>Save</app-submit-button> <app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
<button type="button" <button type="button"
class="cod-button secondary" class="cod-button secondary"
(click)="goPreviousLocation()" (click)="goPreviousLocation()"

8
frontend/src/app/components/publication-edition/publication-edition.component.scss
View File

@@ -9,7 +9,7 @@
max-width: 80em; max-width: 80em;
width: 90%; width: 90%;
border-radius: .5em; border-radius: .5em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
& > header { & > header {
padding: 2em; padding: 2em;
@@ -82,13 +82,13 @@
cursor: pointer; cursor: pointer;
border-radius: 1em; border-radius: 1em;
opacity: .9; opacity: .9;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out; transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24); box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
} }
} }
} }
@@ -112,7 +112,7 @@
align-items: center; align-items: center;
width: 3em; width: 3em;
height: 3em; height: 3em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
font-weight: bold; font-weight: bold;
&:hover { &:hover {

117
frontend/src/app/components/publication-edition/publication-edition.component.ts
View File

@@ -1,23 +1,25 @@
import {CommonModule, Location} from "@angular/common"; import { CommonModule, Location } from "@angular/common";
import {Component, effect, inject, input, output, signal} from "@angular/core"; import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
import {FormGroup, ReactiveFormsModule} from "@angular/forms"; import { FormGroup, ReactiveFormsModule } from "@angular/forms";
import {MatDialogModule} from "@angular/material/dialog"; import { MatDialogModule } from "@angular/material/dialog";
import {MatIconModule} from "@angular/material/icon"; import { MatIconModule } from "@angular/material/icon";
import {MatInputModule} from "@angular/material/input"; import { MatInputModule } from "@angular/material/input";
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import {MatSelectModule} from "@angular/material/select"; import { MatSelectModule } from "@angular/material/select";
import {MatTabsModule} from "@angular/material/tabs"; import { MatTabsModule } from "@angular/material/tabs";
import {MatTooltipModule} from "@angular/material/tooltip"; import { MatTooltipModule } from "@angular/material/tooltip";
import {map, Observable} from "rxjs"; import { map, Observable, of, Subscription } from "rxjs";
import {Category} from "../../core/rest-services/category/model/category"; import { Category } from "../../core/rest-services/category/model/category";
import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication"; import { Publication } from "../../core/rest-services/publications/model/publication";
import {CategoryService} from "../../core/service/category.service"; import { CategoryService } from "../../core/service/category.service";
import {SubmitButtonComponent} from "../submit-button/submit-button.component"; import { SubmitButtonComponent } from "../submit-button/submit-button.component";
import {PublicationEditionService} from "./publication-edition.service"; import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import {MatRippleModule} from "@angular/material/core"; import { PublicationEditionService } from "./publication-edition.service";
import { MatRippleModule } from "@angular/material/core";
@Component({ @Component({
selector: 'app-publication-edition', selector: 'app-publication-edition',
standalone: true,
templateUrl: './publication-edition.component.html', templateUrl: './publication-edition.component.html',
styleUrl: './publication-edition.component.scss', styleUrl: './publication-edition.component.scss',
imports: [ imports: [
@@ -30,42 +32,42 @@ import {MatRippleModule} from "@angular/material/core";
MatSelectModule, MatSelectModule,
MatTabsModule, MatTabsModule,
MatTooltipModule, MatTooltipModule,
PictureSelectionDialog,
ReactiveFormsModule, ReactiveFormsModule,
SubmitButtonComponent SubmitButtonComponent
], ],
providers: [PublicationEditionService] providers: [PublicationEditionService]
}) })
export class PublicationEditionComponent { export class PublicationEditionComponent implements OnChanges, OnDestroy {
readonly #categoryService = inject(CategoryService); @Input()
readonly #location = inject(Location); publication!: Publication;
readonly #publicationEditionService = inject(PublicationEditionService); @Input()
title!: string;
@Input()
isSaving$: Observable<boolean> = of(false);
@Output()
publicationSave = new EventEmitter<Publication>();
publication = input.required<Publication>(); publicationInEdition!: Publication;
title = input.required<string>(); private readonly categoryService = inject(CategoryService);
isSaving = input.required<boolean>(); private readonly location = inject(Location);
publicationSave = output<Publication>(); private readonly publicationEditionService = inject(PublicationEditionService);
private subscriptions: Subscription[] = [];
isLoading = this.#publicationEditionService.isLoading;
isPreviewing = this.#publicationEditionService.isPreviewing;
publicationInEdition = signal<Publication>(DEFAULT_PUBLICATION);
constructor() {
effect(() => {
let publication = this.publication();
const publicationInEdition = this.publicationInEdition();
if (!publicationInEdition || publicationInEdition !== publication) {
this.publicationInEdition.set(publication);
this.#publicationEditionService.init(publication);
}
});
}
get publicationEditionForm(): FormGroup { get publicationEditionForm(): FormGroup {
return this.#publicationEditionService.publicationEditionForm; return this.publicationEditionService.publicationEditionForm;
}
get isLoading$(): Observable<boolean> {
return this.publicationEditionService.isLoading$;
}
get isPreviewing$(): Observable<boolean> {
return this.publicationEditionService.isPreviewing$;
} }
get categories$(): Observable<Category[]> { get categories$(): Observable<Category[]> {
return this.#categoryService.categories$ return this.categoryService.categories$
.pipe( .pipe(
map(categories => map(categories =>
categories.filter(category => category.subCategories.length == 0) categories.filter(category => category.subCategories.length == 0)
@@ -88,28 +90,41 @@ export class PublicationEditionComponent {
return 0; return 0;
} }
ngOnChanges(): void {
this.ngOnDestroy();
if (!this.publicationInEdition || this.publicationInEdition !== this.publication) {
this.publicationInEdition = this.publication;
this.publicationEditionService.init(this.publicationInEdition);
}
}
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
}
goPreviousLocation(): void { goPreviousLocation(): void {
this.#location.back(); this.location.back();
} }
insertTitle(titleNumber: number): void { insertTitle(titleNumber: number): void {
this.#publicationEditionService.insertTitle(titleNumber); this.publicationEditionService.insertTitle(titleNumber);
} }
selectAPicture(): void { selectAPicture(): void {
this.#publicationEditionService.selectAPicture(); this.publicationEditionService.selectAPicture();
} }
insertLink(): void { insertLink(): void {
this.#publicationEditionService.insertLink(); this.publicationEditionService.insertLink();
} }
displayCodeBlockDialog(): void { displayCodeBlockDialog(): void {
this.#publicationEditionService.displayCodeBlockDialog(); this.publicationEditionService.displayCodeBlockDialog();
} }
displayPictureSectionDialog(): void { displayPictureSectionDialog(): void {
this.#publicationEditionService.displayPictureSectionDialog(); this.publicationEditionService.displayPictureSectionDialog();
} }
updateCursorPosition(event: KeyboardEvent | MouseEvent): void { updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
@@ -119,17 +134,17 @@ export class PublicationEditionComponent {
const positionStart = textarea.selectionStart; const positionStart = textarea.selectionStart;
const positionEnd = textarea.selectionEnd; const positionEnd = textarea.selectionEnd;
this.#publicationEditionService.editCursorPosition(positionStart, positionEnd); this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
} }
} }
save(): void { save(): void {
this.publicationSave.emit(this.#publicationEditionService.editedPublication); this.publicationSave.emit(this.publicationEditionService.editedPublication);
} }
onTabChange(tabSelectedIndex: number): void { onTabChange(tabSelectedIndex: number): void {
if (tabSelectedIndex === 1) { if (tabSelectedIndex === 1) {
this.#publicationEditionService.loadPreview(); this.publicationEditionService.loadPreview();
} }
} }
} }

185
frontend/src/app/components/publication-edition/publication-edition.service.ts
View File

@@ -1,16 +1,16 @@
import {Location} from "@angular/common"; import { Location } from "@angular/common";
import {inject, Injectable, OnDestroy, Signal, signal} from "@angular/core"; import { inject, Injectable, OnDestroy } from "@angular/core";
import {MatDialog} from "@angular/material/dialog"; import { MatDialog } from "@angular/material/dialog";
import {MatSnackBar} from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import {ActivatedRoute} from "@angular/router"; import { ActivatedRoute } from "@angular/router";
import {debounceTime, distinctUntilChanged, Subscription} from "rxjs"; import { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, Subscription } from "rxjs";
import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication"; import { Publication } from "../../core/rest-services/publications/model/publication";
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service"; import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
import {copy} from "../../core/utils/ObjectUtils"; import { copy } from "../../core/utils/ObjectUtils";
import {CodeBlockDialog} from "./code-block-dialog/code-block-dialog.component"; import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
import {PictureSelectionDialog} from "./picture-selection-dialog/picture-selection-dialog.component"; import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import {PreviewContentRequest} from "../../core/rest-services/publications/model/preview"; import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview";
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
declare let Prism: any; declare let Prism: any;
@@ -31,6 +31,23 @@ export interface PublicationEditionState {
cursorPosition: CursorPosition; cursorPosition: CursorPosition;
} }
const DEFAULT_PUBLICATION: Publication = {
id: '',
key: '',
title: '',
text: '',
parsedText: '',
description: '',
creationDate: new Date(),
illustrationId: '',
categoryId: '',
author: {
id: '',
name: '',
image: ''
}
};
const DEFAULT_CURSOR_POSITION = new CursorPosition(0, 0); const DEFAULT_CURSOR_POSITION = new CursorPosition(0, 0);
const DEFAULT_STATE: PublicationEditionState = { const DEFAULT_STATE: PublicationEditionState = {
@@ -40,20 +57,20 @@ const DEFAULT_STATE: PublicationEditionState = {
@Injectable() @Injectable()
export class PublicationEditionService implements OnDestroy { export class PublicationEditionService implements OnDestroy {
readonly #activatedRoute = inject(ActivatedRoute); private readonly activatedRoute = inject(ActivatedRoute);
readonly #dialog = inject(MatDialog); private readonly dialog = inject(MatDialog);
readonly #formBuilder = inject(FormBuilder); private readonly formBuilder = inject(FormBuilder);
readonly #location = inject(Location); private readonly location = inject(Location);
readonly #publicationRestService = inject(PublicationRestService); private readonly publicationRestService = inject(PublicationRestService);
readonly #snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
#isLoading = signal(false); private isLoadingSubject = new BehaviorSubject<boolean>(false);
#state = signal<PublicationEditionState>(copy(DEFAULT_STATE)); private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
#isSaving = signal<boolean>(false); private subscriptions: Subscription[] = [];
#isPreviewing = signal<boolean>(false); private isSavingSubject = new BehaviorSubject<boolean>(false);
#subscriptions: Subscription[] = []; private isPreviewingSubject = new BehaviorSubject<boolean>(false);
publicationEditionForm: FormGroup = this.#formBuilder.group({ publicationEditionForm: FormGroup = this.formBuilder.group({
title: new FormControl<string | undefined>('', [Validators.required]), title: new FormControl<string | undefined>('', [Validators.required]),
description: new FormControl<string | undefined>('', [Validators.required]), description: new FormControl<string | undefined>('', [Validators.required]),
text: new FormControl<string | undefined>('', [Validators.required]), text: new FormControl<string | undefined>('', [Validators.required]),
@@ -62,11 +79,19 @@ export class PublicationEditionService implements OnDestroy {
}); });
ngOnDestroy(): void { ngOnDestroy(): void {
this.#subscriptions.forEach(subscription => subscription.unsubscribe()); this.subscriptions.forEach(subscription => subscription.unsubscribe());
} }
#updateForm(): void { private get _state(): PublicationEditionState {
const state = this.#state(); return this.stateSubject.value;
}
private _save(state: PublicationEditionState): void {
this.stateSubject.next(state);
}
private _updateForm(): void {
const state = this._state;
const publication = state.publication; const publication = state.publication;
this.publicationEditionForm.controls['title'].setValue(publication.title); this.publicationEditionForm.controls['title'].setValue(publication.title);
@@ -76,56 +101,56 @@ export class PublicationEditionService implements OnDestroy {
this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId); this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
} }
get isLoading(): Signal<boolean> { get isLoading$(): Observable<boolean> {
return this.#isLoading.asReadonly(); return this.isLoadingSubject.asObservable();
} }
get isSaving(): Signal<boolean> { get isSaving$(): Observable<boolean> {
return this.#isSaving.asReadonly(); return this.isSavingSubject.asObservable();
} }
get isPreviewing(): Signal<boolean> { get isPreviewing$(): Observable<boolean> {
return this.#isPreviewing.asReadonly(); return this.isPreviewingSubject.asObservable();
} }
get state(): Signal<PublicationEditionState> { get state$(): Observable<PublicationEditionState> {
return this.#state.asReadonly(); return this.stateSubject.asObservable();
} }
get editedPublication(): Publication { get editedPublication(): Publication {
return this.#state().publication; return this._state.publication;
} }
loadPublication(): void { loadPublication(): void {
this.#isLoading.set(true); this.isLoadingSubject.next(true);
this.#activatedRoute.paramMap.subscribe(params => { this.activatedRoute.paramMap.subscribe(params => {
const publicationId = params.get('publicationId'); const publicationId = params.get('publicationId');
if (publicationId == undefined) { if (publicationId == undefined) {
this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000}); this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
this.#location.back(); this.location.back();
} else { } else {
this.#publicationRestService.getById(publicationId) this.publicationRestService.getById(publicationId)
.then(publication => { .then(publication => {
const state = this.#state(); const state = this._state;
state.publication = publication; state.publication = publication;
this.#state.set(state); this.stateSubject.next(state);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`; const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error) console.error(errorMessage, error)
}) })
.finally(() => this.#isLoading.set(false)); .finally(() => this.isLoadingSubject.next(false));
} }
}); });
} }
init(publication: Publication): void { init(publication: Publication): void {
const state = this.#state(); const state = this._state;
state.publication = publication; state.publication = publication;
this.#state.set(state); this.stateSubject.next(state);
this.#updateForm(); this._updateForm();
const formValueChangesSubscription = this.publicationEditionForm.valueChanges const formValueChangesSubscription = this.publicationEditionForm.valueChanges
.pipe( .pipe(
@@ -133,7 +158,7 @@ export class PublicationEditionService implements OnDestroy {
distinctUntilChanged() distinctUntilChanged()
) )
.subscribe(formValue => { .subscribe(formValue => {
const state = this.#state(); const state = this._state;
const publication = state.publication; const publication = state.publication;
publication.title = formValue.title; publication.title = formValue.title;
@@ -141,19 +166,19 @@ export class PublicationEditionService implements OnDestroy {
publication.categoryId = formValue.categoryId; publication.categoryId = formValue.categoryId;
publication.text = formValue.text; publication.text = formValue.text;
this.#state.set(state); this._save(state);
}); })
this.#subscriptions.push(formValueChangesSubscription); this.subscriptions.push(formValueChangesSubscription);
} }
private editIllustrationId(pictureId: string): void { private editIllustrationId(pictureId: string): void {
const state = this.#state(); const state = this._state;
state.publication.illustrationId = pictureId state.publication.illustrationId = pictureId
this.#state.set(state); this._save(state);
} }
displayPictureSectionDialog(): void { displayPictureSectionDialog(): void {
const dialogRef = this.#dialog.open(PictureSelectionDialog); const dialogRef = this.dialog.open(PictureSelectionDialog);
const afterDialogCloseSubscription = dialogRef.afterClosed() const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => { .subscribe(newPictureId => {
@@ -161,11 +186,11 @@ export class PublicationEditionService implements OnDestroy {
this.editIllustrationId(newPictureId); this.editIllustrationId(newPictureId);
} }
}); });
this.#subscriptions.push(afterDialogCloseSubscription); this.subscriptions.push(afterDialogCloseSubscription);
} }
displayCodeBlockDialog(): void { displayCodeBlockDialog(): void {
const dialogRef = this.#dialog.open(CodeBlockDialog, {width: '60em'}); const dialogRef = this.dialog.open(CodeBlockDialog, { width: '60em' });
const afterDialogCloseSubscription = dialogRef.afterClosed() const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(codeBlockWithLanguage => { .subscribe(codeBlockWithLanguage => {
@@ -173,21 +198,21 @@ export class PublicationEditionService implements OnDestroy {
this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock); this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
} }
}); });
this.#subscriptions.push(afterDialogCloseSubscription); this.subscriptions.push(afterDialogCloseSubscription);
} }
editCursorPosition(positionStart: number, positionEnd: number): void { editCursorPosition(positionStart: number, positionEnd: number): void {
const state = this.#state(); const state = this._state;
state.cursorPosition.start = positionStart; state.cursorPosition.start = positionStart;
state.cursorPosition.end = positionEnd; state.cursorPosition.end = positionEnd;
this.#state.set(state); this._save(state);
} }
insertTitle(titleNumber: number): void { insertTitle(titleNumber: number): void {
if (titleNumber >= 1 && titleNumber <= 3) { if (titleNumber >= 1 && titleNumber <= 3) {
const state = this.#state(); const state = this._state;
const publication = state.publication; const publication = state.publication;
@@ -198,15 +223,15 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this.#state.set(state); this._save(state);
this.#updateForm(); this._updateForm();
} else { } else {
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`); console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
} }
} }
selectAPicture(): void { selectAPicture(): void {
const dialogRef = this.#dialog.open(PictureSelectionDialog); const dialogRef = this.dialog.open(PictureSelectionDialog);
const afterDialogCloseSubscription = dialogRef.afterClosed() const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => { .subscribe(newPictureId => {
@@ -214,11 +239,11 @@ export class PublicationEditionService implements OnDestroy {
this.insertPicture(newPictureId); this.insertPicture(newPictureId);
} }
}); });
this.#subscriptions.push(afterDialogCloseSubscription); this.subscriptions.push(afterDialogCloseSubscription);
} }
insertPicture(pictureId: string): void { insertPicture(pictureId: string): void {
const state = this.#state(); const state = this._state;
const publication = state.publication; const publication = state.publication;
@@ -228,12 +253,12 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this.#state.set(state); this._save(state);
this.#updateForm(); this._updateForm();
} }
insertLink(): void { insertLink(): void {
const state = this.#state(); const state = this._state;
const publication = state.publication; const publication = state.publication;
@@ -244,12 +269,12 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this.#state.set(state); this._save(state);
this.#updateForm(); this._updateForm();
} }
private insertCodeBlock(programmingLanguage: string, codeBlock: string): void { private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
const state = this.#state(); const state = this._state;
const publication = state.publication; const publication = state.publication;
@@ -260,28 +285,28 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this.#state.set(state); this._save(state);
this.#updateForm(); this._updateForm();
} }
loadPreview(): void { loadPreview(): void {
const state = this.#state(); const state = this._state;
this.#isPreviewing.set(true); this.isPreviewingSubject.next(true);
const request: PreviewContentRequest = { const request: PreviewContentRequest = {
text: state.publication.text text: state.publication.text
}; };
this.#publicationRestService.preview(request) this.publicationRestService.preview(request)
.then(response => { .then(response => {
state.publication.parsedText = response.text; state.publication.parsedText = response.text;
this.#state.set(state); this._save(state);
setTimeout(() => Prism.highlightAll(), 1000); setTimeout(() => Prism.highlightAll(), 1000);
}) })
.catch(error => { .catch(error => {
console.error(error); console.error(error);
}) })
.finally(() => { .finally(() => {
this.#isPreviewing.set(false); this.isPreviewingSubject.next(false);
}); });
} }
} }

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

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

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

@@ -12,14 +12,14 @@ $cardBorderRadius: .5em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: $cardBorderRadius; border-radius: $cardBorderRadius;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); 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; transition: box-shadow .2s ease-in-out;
text-decoration: none; text-decoration: none;
color: black; color: black;
background-color: #ffffff; background-color: #ffffff;
&:hover { &:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .24), 0 4px 14px 0 rgba(0, 0, 0, .16); box-shadow: 0 4px 8px 0 rgba(0,0,0,.24),0 4px 14px 0 rgba(0,0,0,.16);
} }
img { img {

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

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

15
frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts
View File

@@ -1,14 +1,15 @@
import {Component, inject} from "@angular/core"; import { Component, inject } from "@angular/core";
import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
import {MatRippleModule} from "@angular/material/core"; import { MatRippleModule } from "@angular/material/core";
import {MatIconModule} from "@angular/material/icon"; import { MatIconModule } from "@angular/material/icon";
import {Router} from "@angular/router"; import { Router } from "@angular/router";
@Component({ @Component({
selector: 'app-publications-search-bar', selector: 'app-publications-search-bar',
templateUrl: './publications-search-bar.component.html', templateUrl: './publications-search-bar.component.html',
styleUrl: './publications-search-bar.component.scss', styleUrl: './publications-search-bar.component.scss',
standalone: true,
imports: [ imports: [
MatIconModule, MatIconModule,
MatRippleModule, MatRippleModule,
@@ -27,8 +28,8 @@ export class PublicationsSearchBarComponent {
const query = this.formGroup.controls.criteria.value const query = this.formGroup.controls.criteria.value
if (query?.trim()) { if (query?.trim()) {
const queryParams = {'query': this.formGroup.controls.criteria.value ?? ''} const queryParams = { 'query' : this.formGroup.controls.criteria.value ?? '' }
this.router.navigate(['/publications'], {queryParams}); this.router.navigate(['/publications'], { queryParams });
} else { } else {
this.router.navigate(['/home']); this.router.navigate(['/home']);
} }

8
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html
View File

@@ -1,16 +1,16 @@
@for (category of categories$ | async; track category) { @for(category of categories$ | async; track category) {
<div class="category {{category.isOpenned ? 'openned' : ''}}"> <div class="category {{category.isOpenned ? 'openned' : ''}}">
<div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)"> <div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
{{ category.name }} {{category.name}}
<mat-icon>chevron_right</mat-icon> <mat-icon>chevron_right</mat-icon>
</div> </div>
<div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}"> <div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
@for (subCategory of category.subCategories; track subCategory) { @for(subCategory of category.subCategories; track subCategory) {
<a [routerLink]="['/publications']" <a [routerLink]="['/publications']"
[queryParams]="{'category-id': subCategory.id}" [queryParams]="{'category-id': subCategory.id}"
(click)="categoryClicked.emit()" (click)="categoryClicked.emit()"
class="sub-category"> class="sub-category">
{{ subCategory.name }} {{subCategory.name}}
</a> </a>
} }
</div> </div>

13
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts
View File

@@ -1,12 +1,13 @@
import {CommonModule} from "@angular/common"; import { CommonModule } from "@angular/common";
import {Component, EventEmitter, inject, OnInit, Output} from "@angular/core"; import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
import {MatIconModule} from "@angular/material/icon"; import { MatIconModule } from "@angular/material/icon";
import {DisplayableCategory, SideMenuService} from "../side-menu.service"; import { DisplayableCategory, SideMenuService } from "../side-menu.service";
import {Observable} from "rxjs"; import { Observable } from "rxjs";
import {RouterModule} from "@angular/router"; import { RouterModule } from "@angular/router";
@Component({ @Component({
selector: 'app-categories-menu', selector: 'app-categories-menu',
standalone: true,
templateUrl: './categories-menu.component.html', templateUrl: './categories-menu.component.html',
imports: [ imports: [
CommonModule, CommonModule,

4
frontend/src/app/components/side-menu/side-menu.component.html
View File

@@ -1,4 +1,4 @@
<div class="menu {{ isOpened() ? 'displayed' : '' }}"> <div class="menu {{ isOpenned ? 'displayed' : '' }}">
<h1> <h1>
<a [routerLink]="['/home']"> <a [routerLink]="['/home']">
<img src="assets/images/codiki.png" alt="logo"/> <img src="assets/images/codiki.png" alt="logo"/>
@@ -16,4 +16,4 @@
<h2 i18n>Categories</h2> <h2 i18n>Categories</h2>
<app-categories-menu (categoryClicked)="close()"></app-categories-menu> <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
</div> </div>
<div class="overlay {{ isOpened() ? 'displayed' : ''}}" (click)="close()"></div> <div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div>

19
frontend/src/app/components/side-menu/side-menu.component.ts
View File

@@ -1,12 +1,13 @@
import {Component, signal} from '@angular/core'; import { Component } from '@angular/core';
import {MatIconModule} from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import {RouterModule} from '@angular/router'; import { RouterModule } from '@angular/router';
import {CategoriesMenuComponent} from './categories-menu/categories-menu.component'; import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
import {MatRippleModule} from '@angular/material/core'; import { MatRippleModule } from '@angular/material/core';
@Component({ @Component({
selector: 'app-side-menu', selector: 'app-side-menu',
standalone: true,
templateUrl: './side-menu.component.html', templateUrl: './side-menu.component.html',
styleUrl: './side-menu.component.scss', styleUrl: './side-menu.component.scss',
imports: [ imports: [
@@ -18,13 +19,13 @@ import {MatRippleModule} from '@angular/material/core';
] ]
}) })
export class SideMenuComponent { export class SideMenuComponent {
isOpened = signal(false); isOpenned: boolean = false;
open(): void { open(): void {
this.isOpened.set(true); this.isOpenned = true;
} }
close(): void { close(): void {
this.isOpened.set(false); this.isOpenned = false;
} }
} }

12
frontend/src/app/components/side-menu/side-menu.service.ts
View File

@@ -1,8 +1,8 @@
import {inject, Injectable} from '@angular/core'; import { Injectable, inject } from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import {BehaviorSubject, Observable} from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import {CategoryRestService} from '../../core/rest-services/category/category.rest-service'; import { CategoryRestService } from '../../core/rest-services/category/category.rest-service';
import {Category} from '../../core/rest-services/category/model/category'; import { Category } from '../../core/rest-services/category/model/category';
export interface DisplayableCategory { export interface DisplayableCategory {
id: string; id: string;
@@ -72,7 +72,7 @@ export class SideMenuService {
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occured while loading categories.`; const errorMessage = $localize`An error occured while loading categories.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
}) })
.finally(() => { .finally(() => {
this.isLoadingSubject.next(false); this.isLoadingSubject.next(false);

8
frontend/src/app/components/submit-button/submit-button.component.html
View File

@@ -1,10 +1,10 @@
<button type="submit" <button type="submit"
class="cod-button {{color()}}" class="cod-button {{color}}"
[disabled]="disabled() || requestPending()" [disabled]="disabled || requestPending"
(click)="click.emit()" (click)="click.emit()"
matRipple> matRipple>
@if (requestPending()) { @if (requestPending) {
<mat-spinner class="spinner {{color()}}" [diameter]="25"></mat-spinner> <mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
} }
<span> <span>
<ng-content/> <ng-content/>

22
frontend/src/app/components/submit-button/submit-button.component.ts
View File

@@ -1,20 +1,24 @@
import {Component, input, output} from "@angular/core"; import { CommonModule } from "@angular/common";
import {MatRippleModule} from "@angular/material/core"; import { Component, EventEmitter, Input, Output } from "@angular/core";
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; import { MatRippleModule } from "@angular/material/core";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
@Component({ @Component({
selector: 'app-submit-button', selector: 'app-submit-button',
standalone: true,
templateUrl: 'submit-button.component.html', templateUrl: 'submit-button.component.html',
styleUrl: 'submit-button.component.scss', styleUrl: 'submit-button.component.scss',
imports: [ imports: [
CommonModule,
MatRippleModule, MatRippleModule,
MatProgressSpinnerModule MatProgressSpinnerModule
] ]
}) })
export class SubmitButtonComponent { export class SubmitButtonComponent {
requestPending = input.required<boolean>(); @Input() requestPending: boolean = false;
label = input<string>(); @Input() label: string = '';
disabled = input<boolean>(false); @Input() disabled: boolean = false;
color = input<'secondary' | undefined>('secondary'); @Input() color?: 'secondary';
click = output<void>(); @Output() click = new EventEmitter<void>();
} }

10
frontend/src/app/core/guard/already-authenticated.guard.ts
View File

@@ -1,7 +1,7 @@
import {inject} from "@angular/core"; import { inject } from "@angular/core";
import {CanActivateFn, Router} from "@angular/router"; import { CanActivateFn, Router } from "@angular/router";
import {AuthenticationService} from "../service/authentication.service"; import { AuthenticationService } from "../service/authentication.service";
import {MatSnackBar} from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
export const alreadyAuthenticatedGuard: CanActivateFn = () => { export const alreadyAuthenticatedGuard: CanActivateFn = () => {
const authenticationService = inject(AuthenticationService); const authenticationService = inject(AuthenticationService);
@@ -10,7 +10,7 @@ export const alreadyAuthenticatedGuard: CanActivateFn = () => {
if (authenticationService.isAuthenticated()) { if (authenticationService.isAuthenticated()) {
router.navigate(['/home']); router.navigate(['/home']);
snackBar.open($localize`You can't access to this page because you are already authenticated.`, $localize`Close`, {duration: 5000}); snackBar.open($localize`You can't access to this page because you are already authenticated.`, $localize`Close`, { duration: 5000 });
return false; return false;
} else { } else {
return true; return true;

10
frontend/src/app/core/guard/authentication.guard.ts
View File

@@ -1,7 +1,7 @@
import {inject} from "@angular/core"; import { inject } from "@angular/core";
import {CanActivateFn, Router} from "@angular/router"; import { CanActivateFn, Router } from "@angular/router";
import {AuthenticationService} from "../service/authentication.service"; import { AuthenticationService } from "../service/authentication.service";
import {MatSnackBar} from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
export const authenticationGuard: CanActivateFn = async () => { export const authenticationGuard: CanActivateFn = async () => {
const authenticationService = inject(AuthenticationService); const authenticationService = inject(AuthenticationService);
@@ -14,7 +14,7 @@ export const authenticationGuard: CanActivateFn = async () => {
return true; return true;
} else { } else {
router.navigate(['/login']); router.navigate(['/login']);
snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000}); snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 });
return false; return false;
} }
} }

17
frontend/src/app/core/interceptor/jwt.interceptor.ts
View File

@@ -1,10 +1,11 @@
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import {inject, Injectable} from '@angular/core'; import { inject, Injectable } from '@angular/core';
import {catchError, filter, Observable, Subject, switchMap, take, throwError} from 'rxjs'; import { catchError, filter, Observable, Subject, switchMap, take, throwError } from 'rxjs';
import {UserRestService} from '../rest-services/user/user.rest-service'; import { RefreshTokenRequest } from '../rest-services/user/model/refresh-token.model';
import {AuthenticationService} from '../service/authentication.service'; import { UserRestService } from '../rest-services/user/user.rest-service';
import {Router} from '@angular/router'; import { AuthenticationService } from '../service/authentication.service';
import {MatSnackBar} from '@angular/material/snack-bar'; import { Router } from '@angular/router';
import { MatSnackBar } from '@angular/material/snack-bar';
@Injectable() @Injectable()
export class JwtInterceptor implements HttpInterceptor { export class JwtInterceptor implements HttpInterceptor {
@@ -71,7 +72,7 @@ export class JwtInterceptor implements HttpInterceptor {
this.router.navigate(['/login']); this.router.navigate(['/login']);
this.refreshTokenSubject.next(undefined); this.refreshTokenSubject.next(undefined);
this.authenticationService.unauthenticate(); this.authenticationService.unauthenticate();
this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, {duration: 5000}); this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, { duration: 5000 });
return throwError(() => initialError); return throwError(() => initialError);
} }
} }

8
frontend/src/app/core/rest-services/category/category.rest-service.ts
View File

@@ -1,7 +1,7 @@
import {HttpClient} from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import {inject, Injectable} from '@angular/core'; import { Injectable, inject } from '@angular/core';
import {lastValueFrom} from 'rxjs'; import { lastValueFrom } from 'rxjs';
import {Category} from './model/category'; import { Category } from './model/category';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'

8
frontend/src/app/core/rest-services/picture/picture.rest-service.ts
View File

@@ -1,7 +1,7 @@
import {HttpClient} from "@angular/common/http"; import { HttpClient, HttpParams } from "@angular/common/http";
import {inject, Injectable} from "@angular/core"; import { inject, Injectable } from "@angular/core";
import {Picture} from "./model/picture"; import { Picture } from "./model/picture";
import {lastValueFrom} from "rxjs"; import { lastValueFrom } from "rxjs";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'

19
frontend/src/app/core/rest-services/publications/model/publication.ts
View File

@@ -1,4 +1,4 @@
import {Author} from "./author"; import { Author } from "./author";
export interface Publication { export interface Publication {
id: string; id: string;
@@ -12,20 +12,3 @@ export interface Publication {
categoryId: string; categoryId: string;
author: Author; author: Author;
} }
export const DEFAULT_PUBLICATION: Publication = {
id: '',
key: '',
title: '',
text: '',
parsedText: '',
description: '',
creationDate: new Date(),
illustrationId: '',
categoryId: '',
author: {
id: '',
name: '',
image: ''
}
}

12
frontend/src/app/core/rest-services/publications/publication.rest-service.ts
View File

@@ -1,8 +1,8 @@
import {HttpClient, HttpParams} from '@angular/common/http'; import { HttpClient, HttpParams } from '@angular/common/http';
import {inject, Injectable} from '@angular/core'; import { Injectable, inject } from '@angular/core';
import {lastValueFrom} from 'rxjs'; import { last, lastValueFrom } from 'rxjs';
import {Publication} from './model/publication'; import { Publication } from './model/publication';
import {PreviewContentRequest, PreviewContentResponse} from './model/preview'; import { PreviewContentRequest, PreviewContentResponse } from './model/preview';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@@ -29,7 +29,7 @@ export class PublicationRestService {
search(searchCriteria: string): Promise<Publication[]> { search(searchCriteria: string): Promise<Publication[]> {
let params = new HttpParams(); let params = new HttpParams();
params = params.set('query', searchCriteria); params = params.set('query', searchCriteria);
return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', {params})); return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', { params }));
} }
preview(request: PreviewContentRequest): Promise<PreviewContentResponse> { preview(request: PreviewContentRequest): Promise<PreviewContentResponse> {

12
frontend/src/app/core/rest-services/user/user.rest-service.ts
View File

@@ -1,9 +1,9 @@
import {HttpClient} from "@angular/common/http"; import { HttpClient } from "@angular/common/http";
import {inject, Injectable} from "@angular/core"; import { Injectable, inject } from "@angular/core";
import {LoginRequest, LoginResponse} from "./model/login.model"; import { LoginRequest, LoginResponse } from "./model/login.model";
import {lastValueFrom} from "rxjs"; import { lastValueFrom } from "rxjs";
import {SigninRequest} from "./model/signin.model"; import { SigninRequest } from "./model/signin.model";
import {RefreshTokenRequest} from "./model/refresh-token.model"; import { RefreshTokenRequest } from "./model/refresh-token.model";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'

12
frontend/src/app/core/service/authentication.service.ts
View File

@@ -1,9 +1,9 @@
import {inject, Injectable} from "@angular/core"; import { inject, Injectable } from "@angular/core";
import {BehaviorSubject, interval} from "rxjs"; import { BehaviorSubject, interval } from "rxjs";
import {User} from "../model/User"; import { User } from "../model/User";
import {UserRestService} from "../rest-services/user/user.rest-service"; import { UserRestService } from "../rest-services/user/user.rest-service";
import {RefreshTokenRequest} from "../rest-services/user/model/refresh-token.model"; import { RefreshTokenRequest } from "../rest-services/user/model/refresh-token.model";
import {LoginResponse} from "../rest-services/user/model/login.model"; import { LoginResponse } from "../rest-services/user/model/login.model";
const JWT_PARAM = 'jwt'; const JWT_PARAM = 'jwt';
const REFRESH_TOKEN_PARAM = 'refresh-token'; const REFRESH_TOKEN_PARAM = 'refresh-token';

8
frontend/src/app/core/service/category.service.ts
View File

@@ -1,7 +1,7 @@
import {inject, Injectable} from '@angular/core'; import { Injectable, inject } from '@angular/core';
import {CategoryRestService} from '../rest-services/category/category.rest-service'; import { CategoryRestService } from '../rest-services/category/category.rest-service';
import {BehaviorSubject, Observable} from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import {Category} from '../rest-services/category/model/category'; import { Category } from '../rest-services/category/model/category';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'

7
frontend/src/app/pages/disconnection/disconnection.component.ts
View File

@@ -1,10 +1,11 @@
import {Component, inject, OnInit} from '@angular/core'; import { Component, OnInit, inject } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {AuthenticationService} from '../../core/service/authentication.service'; import { AuthenticationService } from '../../core/service/authentication.service';
import {Router} from '@angular/router'; import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-disconnection', selector: 'app-disconnection',
standalone: true,
imports: [MatProgressSpinnerModule], imports: [MatProgressSpinnerModule],
templateUrl: './disconnection.component.html', templateUrl: './disconnection.component.html',
styleUrl: './disconnection.component.scss' styleUrl: './disconnection.component.scss'

8
frontend/src/app/pages/home/home.component.html
View File

@@ -1,10 +1,10 @@
<h1 i18n>Last publications</h1> <h1 i18n>Last publications</h1>
@if ((isLoading())) { @if ((isLoading$ | async) === true) {
<h2 i18n>Publications loading...</h2> <h2 i18n>Publications loading...</h2>
<mat-spinner/> <mat-spinner></mat-spinner>
} @else { } @else {
@if (publications(); as publications) { @if ((publications$ | async) != []) {
<app-publication-list [publications]="publications"/> <app-publication-list [publications$]="publications$"></app-publication-list>
} @else { } @else {
<h2 i18n>No any publication.</h2> <h2 i18n>No any publication.</h2>
} }

27
frontend/src/app/pages/home/home.component.ts
View File

@@ -1,11 +1,14 @@
import {Component, inject, OnInit} from '@angular/core'; import { Component, OnInit, inject } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import {PublicationListComponent} from '../../components/publication-list/publication-list.component'; import { Observable } from 'rxjs';
import {HomeService} from './home.service'; import { PublicationListComponent } from '../../components/publication-list/publication-list.component';
import {CommonModule} from '@angular/common'; import { Publication } from '../../core/rest-services/publications/model/publication';
import { HomeService } from './home.service';
import { CommonModule } from '@angular/common';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
@@ -16,11 +19,17 @@ import {CommonModule} from '@angular/common';
providers: [HomeService] providers: [HomeService]
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
readonly #homeService = inject(HomeService); private homeService = inject(HomeService);
isLoading = this.#homeService.isLoading;
publications = this.#homeService.publications; get isLoading$(): Observable<boolean> {
return this.homeService.isLoading$;
}
get publications$(): Observable<Publication[]> {
return this.homeService.publications$;
}
ngOnInit(): void { ngOnInit(): void {
this.#homeService.startLatestPublicationsRetrieving(); this.homeService.startLatestPublicationsRetrieving();
} }
} }

29
frontend/src/app/pages/home/home.service.ts
View File

@@ -1,34 +1,35 @@
import {inject, Injectable, Signal, signal} from "@angular/core"; import { Injectable, inject } from "@angular/core";
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service"; import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
import {MatSnackBar} from "@angular/material/snack-bar" import { BehaviorSubject, Observable } from "rxjs";
import {Publication} from "../../core/rest-services/publications/model/publication"; import { MatSnackBar } from "@angular/material/snack-bar"
import { Publication } from "../../core/rest-services/publications/model/publication";
@Injectable() @Injectable()
export class HomeService { export class HomeService {
private publicationRestService = inject(PublicationRestService); private publicationRestService = inject(PublicationRestService);
private snackBar = inject(MatSnackBar); private snackBar = inject(MatSnackBar);
#publications = signal<Publication[]>([]); private publicationsSubject = new BehaviorSubject<Publication[]>([]);
#isLoadingSubject = signal<boolean>(false); private isLoadingSubject = new BehaviorSubject<boolean>(false);
get isLoading(): Signal<boolean> { get isLoading$(): Observable<boolean> {
return this.#isLoadingSubject.asReadonly(); return this.isLoadingSubject.asObservable();
} }
get publications(): Signal<Publication[]> { get publications$(): Observable<Publication[]> {
return this.#publications.asReadonly(); return this.publicationsSubject.asObservable();
} }
startLatestPublicationsRetrieving(): void { startLatestPublicationsRetrieving(): void {
this.#isLoadingSubject.set(true); this.isLoadingSubject.next(true);
this.publicationRestService.getLatest() this.publicationRestService.getLatest()
.then(publications => this.#publications.set(publications)) .then(publications => this.publicationsSubject.next(publications))
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occurred while retrieving latest publications...`; const errorMessage = $localize`An error occurred while retrieving latest publications...`;
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
console.error(errorMessage, error); console.error(errorMessage, error);
}) })
.finally(() => this.#isLoadingSubject.set(false)); .finally(() => this.isLoadingSubject.next(false));
} }
} }

4
frontend/src/app/pages/login/login.component.html
View File

@@ -6,7 +6,7 @@
Email address Email address
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="email" id="email" formControlName="email" autocomplete="email" required/> <input type="email" id="email" formControlName="email" autocomplete="email" required />
</div> </div>
<div class="form-field"> <div class="form-field">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
@@ -14,7 +14,7 @@
Password Password
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="password" id="password" formControlName="password" required/> <input type="password" id="password" formControlName="password" required />
</div> </div>
<div class="actions reversed"> <div class="actions reversed">
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button> <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>

23
frontend/src/app/pages/login/login.component.ts
View File

@@ -1,15 +1,16 @@
import {Component, inject, OnDestroy, OnInit} from '@angular/core'; import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import {MatSnackBarModule} from '@angular/material/snack-bar'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import {debounceTime, map, Subscription} from 'rxjs'; import { Subscription, debounceTime, map } from 'rxjs';
import {LoginService} from './login.service'; import { LoginService } from './login.service';
import {MatIconModule} from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import {RouterModule} from '@angular/router'; import { RouterModule } from '@angular/router';
import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component"; import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
import {MatRippleModule} from '@angular/material/core'; import { MatRippleModule } from '@angular/material/core';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
standalone: true,
templateUrl: './login.component.html', templateUrl: './login.component.html',
styleUrl: './login.component.scss', styleUrl: './login.component.scss',
imports: [ imports: [
@@ -53,8 +54,8 @@ export class LoginComponent implements OnInit, OnDestroy {
const stateSubscription = this.loginService.state$ const stateSubscription = this.loginService.state$
.subscribe(state => { .subscribe(state => {
this.loginForm.controls['email'].setValue(state.request.email, {emitEvent: false}); this.loginForm.controls['email'].setValue(state.request.email, { emitEvent: false });
this.loginForm.controls['password'].setValue(state.request.password, {emitEvent: false}); this.loginForm.controls['password'].setValue(state.request.password, { emitEvent: false });
}); });
this.subscriptions.push(stateSubscription); this.subscriptions.push(stateSubscription);
} }

24
frontend/src/app/pages/login/login.service.ts
View File

@@ -1,12 +1,12 @@
import {inject, Injectable} from '@angular/core'; import { Injectable, inject } from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import {copy} from '../../core/utils/ObjectUtils'; import { copy } from '../../core/utils/ObjectUtils';
import {FormError} from '../../core/model/FormError'; import { FormError } from '../../core/model/FormError';
import {UserRestService} from '../../core/rest-services/user/user.rest-service'; import { UserRestService } from '../../core/rest-services/user/user.rest-service';
import {LoginRequest} from '../../core/rest-services/user/model/login.model'; import { LoginRequest } from '../../core/rest-services/user/model/login.model';
import {AuthenticationService} from '../../core/service/authentication.service'; import { AuthenticationService } from '../../core/service/authentication.service';
import {MatSnackBar} from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import {Router} from '@angular/router'; import { Router } from '@angular/router';
export interface LoginState { export interface LoginState {
request: LoginRequest; request: LoginRequest;
@@ -65,15 +65,15 @@ export class LoginService {
.login(state.request) .login(state.request)
.then((response) => { .then((response) => {
this.authenticationService.authenticate(response.accessToken, response.refreshToken); this.authenticationService.authenticate(response.accessToken, response.refreshToken);
this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, {duration: 5000}); this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
this.router.navigate(['/home']); this.router.navigate(['/home']);
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
this.snackBar.open($localize`Authentication failed.`, $localize`Close`, {duration: 5000}); this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
}); });
} else { } else {
this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, {duration: 5000}); this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, { duration: 5000 });
} }
} }

6
frontend/src/app/pages/my-publications/my-publications.component.html
View File

@@ -9,12 +9,12 @@
+ +
</a> </a>
@if (isLoading()) { @if ((isLoading$ | async) === true) {
<h2 i18n>Publication loading...</h2> <h2 i18n>Publication loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
} @else { } @else {
@if (isLoaded()) { @if ((isLoaded$ | async) === true) {
<app-publication-list [publications]="publications()"></app-publication-list> <app-publication-list [publications$]="publications$"></app-publication-list>
} @else { } @else {
<h2 i18n>There is no any publication...</h2> <h2 i18n>There is no any publication...</h2>
} }

2
frontend/src/app/pages/my-publications/my-publications.component.scss
View File

@@ -18,7 +18,7 @@ $newPublicationButtonSize: 1.7em;
width: $newPublicationButtonSize; width: $newPublicationButtonSize;
height: $newPublicationButtonSize; height: $newPublicationButtonSize;
text-decoration: none; text-decoration: none;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
font-size: 2.2em; font-size: 2.2em;

33
frontend/src/app/pages/my-publications/my-publications.component.ts
View File

@@ -1,15 +1,18 @@
import {Component, inject, OnInit} from "@angular/core"; import { Component, inject, OnInit } from "@angular/core";
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import {MyPublicationsService} from "./my-publications.service"; import { MyPublicationsService } from "./my-publications.service";
import {PublicationListComponent} from "../../components/publication-list/publication-list.component"; import { Observable } from "rxjs";
import {CommonModule} from "@angular/common"; import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
import {RouterModule} from "@angular/router"; import { Publication } from "../../core/rest-services/publications/model/publication";
import {MatTooltipModule} from "@angular/material/tooltip"; import { CommonModule } from "@angular/common";
import {MatRippleModule} from "@angular/material/core"; import { RouterModule } from "@angular/router";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatRippleModule } from "@angular/material/core";
@Component({ @Component({
selector: 'app-my-component', selector: 'app-my-component',
standalone: true,
templateUrl: './my-publications.component.html', templateUrl: './my-publications.component.html',
styleUrl: './my-publications.component.scss', styleUrl: './my-publications.component.scss',
imports: [ imports: [
@@ -25,9 +28,17 @@ import {MatRippleModule} from "@angular/material/core";
export class MyPublicationsComponent implements OnInit { export class MyPublicationsComponent implements OnInit {
private readonly myPublicationsService = inject(MyPublicationsService); private readonly myPublicationsService = inject(MyPublicationsService);
publications = this.myPublicationsService.publications; get publications$(): Observable<Publication[]> {
isLoading = this.myPublicationsService.isLoading; return this.myPublicationsService.publications$;
isLoaded = this.myPublicationsService.isLoaded; }
get isLoading$(): Observable<boolean> {
return this.myPublicationsService.isLoading$;
}
get isLoaded$(): Observable<boolean> {
return this.myPublicationsService.isLoaded$;
}
ngOnInit(): void { ngOnInit(): void {
this.myPublicationsService.loadAuthenticatedUserPublications(); this.myPublicationsService.loadAuthenticatedUserPublications();

8
frontend/src/app/pages/my-publications/my-publications.routes.ts
View File

@@ -1,7 +1,7 @@
import {Route} from "@angular/router"; import { Route } from "@angular/router";
import {authenticationGuard} from "../../core/guard/authentication.guard"; import { authenticationGuard } from "../../core/guard/authentication.guard";
import {MyPublicationsComponent} from "./my-publications.component"; import { MyPublicationsComponent } from "./my-publications.component";
export const ROUTES: Route[] = [ export const ROUTES: Route[] = [
{path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard]} { path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard] }
] ]

61
frontend/src/app/pages/my-publications/my-publications.service.ts
View File

@@ -1,56 +1,57 @@
import {inject, Injectable, Signal, signal} from "@angular/core"; import { inject, Injectable } from "@angular/core";
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service"; import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
import {AuthenticationService} from "../../core/service/authentication.service"; import { AuthenticationService } from "../../core/service/authentication.service";
import {Publication} from "../../core/rest-services/publications/model/publication"; import { BehaviorSubject, Observable } from "rxjs";
import {Router} from "@angular/router"; import { Publication } from "../../core/rest-services/publications/model/publication";
import {MatSnackBar} from "@angular/material/snack-bar"; import { Router } from "@angular/router";
import { MatSnackBar } from "@angular/material/snack-bar";
@Injectable() @Injectable()
export class MyPublicationsService { export class MyPublicationsService {
readonly #authenticationService = inject(AuthenticationService); private readonly authenticationService = inject(AuthenticationService);
readonly #publicationRestService = inject(PublicationRestService); private readonly publicationRestService = inject(PublicationRestService);
readonly #snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
readonly #router = inject(Router); private readonly router = inject(Router);
#publications = signal<Publication[]>([]); private publicationsSubject = new BehaviorSubject<Publication[]>([]);
#isLoading = signal(false); private isLoadingSubject = new BehaviorSubject<boolean>(false);
#isLoaded = signal(false); private isLoadedSubject = new BehaviorSubject<boolean>(false);
get publications(): Signal<Publication[]> { get publications$(): Observable<Publication[]> {
return this.#publications.asReadonly(); return this.publicationsSubject.asObservable();
} }
get isLoading(): Signal<boolean> { get isLoading$(): Observable<boolean> {
return this.#isLoading.asReadonly(); return this.isLoadingSubject.asObservable();
} }
get isLoaded(): Signal<boolean> { get isLoaded$(): Observable<boolean> {
return this.#isLoaded.asReadonly(); return this.isLoadedSubject.asObservable();
} }
loadAuthenticatedUserPublications(): void { loadAuthenticatedUserPublications(): void {
const authenticatedUser = this.#authenticationService.getAuthenticatedUser(); const authenticatedUser = this.authenticationService.getAuthenticatedUser();
if (authenticatedUser) { if (authenticatedUser) {
this.#isLoading.set(true); this.isLoadingSubject.next(true);
this.#isLoaded.set(false); this.isLoadedSubject.next(false);
const query = `author_id=${authenticatedUser.id}`; const query = `author_id=${authenticatedUser.id}`;
this.#publicationRestService.search(query) this.publicationRestService.search(query)
.then(publications => { .then(publications => {
this.#publications.set(publications); this.publicationsSubject.next(publications);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occurred while retrieving your publications...`; const errorMessage = $localize`An error occurred while retrieving your publications...`;
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
console.error(errorMessage, error); console.error(errorMessage, error);
}) })
.finally(() => { .finally(() => {
this.#isLoading.set(false); this.isLoadingSubject.next(false);
this.#isLoaded.set(true); this.isLoadedSubject.next(true);
}); });
} else { } else {
this.#authenticationService.unauthenticate(); this.authenticationService.unauthenticate();
this.#snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000}); this.snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 });
this.#router.navigate(['/login']); this.router.navigate(['/login']);
} }
} }
} }

8
frontend/src/app/pages/publication-creation/publication-creation.component.html
View File

@@ -1,7 +1,7 @@
<app-publication-edition <app-publication-edition
title="Creation of a new publication" title="Creation of a new publication"
[publication]="publication()" [publication]="publication"
[isSaving]="isSaving()" [isSaving$]="isSaving$"
(publicationSave)="onPublicationSave($event)" (publicationSave)="onPublicationSave($event)"
i18n-title i18n-title>
/> </app-publication-edition>

69
frontend/src/app/pages/publication-creation/publication-creation.component.ts
View File

@@ -1,53 +1,76 @@
import {Component, inject, OnInit, signal} from "@angular/core"; import { Component, inject, OnInit } from "@angular/core";
import {PublicationEditionComponent} from "../../components/publication-edition/publication-edition.component"; import { PublicationEditionComponent } from "../../components/publication-edition/publication-edition.component";
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service"; import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
import {Router} from "@angular/router"; import { ActivatedRoute, Router } from "@angular/router";
import {MatSnackBar} from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication"; import { BehaviorSubject, Observable, Subscription } from "rxjs";
import {AuthenticationService} from "../../core/service/authentication.service"; import { Publication } from "../../core/rest-services/publications/model/publication";
import {Author} from "../../core/rest-services/publications/model/author"; import { AuthenticationService } from "../../core/service/authentication.service";
import { Author } from "../../core/rest-services/publications/model/author";
import { CommonModule } from "@angular/common";
@Component({ @Component({
selector: 'app-publication-creation', selector: 'app-publication-creation',
standalone: true,
templateUrl: './publication-creation.component.html', templateUrl: './publication-creation.component.html',
styleUrl: './publication-creation.component.scss', styleUrl: './publication-creation.component.scss',
imports: [ imports: [
CommonModule,
PublicationEditionComponent PublicationEditionComponent
] ]
}) })
export class PublicationCreationComponent implements OnInit { export class PublicationCreationComponent implements OnInit {
readonly #authenticationService = inject(AuthenticationService); private readonly authenticationService = inject(AuthenticationService);
readonly #publicationRestService = inject(PublicationRestService); private readonly publicationRestService = inject(PublicationRestService);
readonly #router = inject(Router); private readonly router = inject(Router);
readonly #snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
isSaving = signal(false); private isSavingSubject = new BehaviorSubject<boolean>(false);
publication = signal<Publication>(DEFAULT_PUBLICATION); private subscriptions: Subscription[] = [];
publication!: Publication;
get isSaving$(): Observable<boolean> {
return this.isSavingSubject.asObservable();
}
ngOnInit(): void { ngOnInit(): void {
const authenticatedUser = this.#authenticationService.getAuthenticatedUser(); const authenticatedUser = this.authenticationService.getAuthenticatedUser();
if (authenticatedUser) { if (authenticatedUser) {
const author: Author = { const author: Author = {
id: authenticatedUser.id, id: authenticatedUser.id,
name: authenticatedUser.pseudo, name: authenticatedUser.pseudo,
image: authenticatedUser.photoId ?? '' image: authenticatedUser.photoId ?? ''
}; };
const newPublication: Publication = {...DEFAULT_PUBLICATION, author}; this.publication = {
this.publication.set(newPublication); id: '',
key: '',
title: '',
text: '',
parsedText: '',
description: '',
creationDate: new Date(),
illustrationId: '',
categoryId: '',
author
};
} }
} }
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
}
onPublicationSave(publication: Publication): void { onPublicationSave(publication: Publication): void {
this.isSaving.set(true); this.isSavingSubject.next(true);
this.#publicationRestService.create(publication) this.publicationRestService.create(publication)
.then(() => { .then(() => {
this.#snackBar.open($localize`Publication created succesfully!`, $localize`Close`, {duration: 5000}); this.snackBar.open($localize`Publication created succesfully!`, $localize`Close`, { duration: 5000 });
this.#router.navigate(['/my-publications']); this.router.navigate(['/my-publications']);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occured while saving new publication.`; const errorMessage = $localize`An error occured while saving new publication.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
}) })
.finally(() => this.isSaving.set(false)); .finally(() => this.isSavingSubject.next(false));
} }
} }

8
frontend/src/app/pages/publication-creation/publication-creation.routes.ts
View File

@@ -1,7 +1,7 @@
import {Route} from "@angular/router"; import { Route } from "@angular/router";
import {authenticationGuard} from "../../core/guard/authentication.guard"; import { authenticationGuard } from "../../core/guard/authentication.guard";
import {PublicationCreationComponent} from "./publication-creation.component"; import { PublicationCreationComponent } from "./publication-creation.component";
export const ROUTES: Route[] = [ export const ROUTES: Route[] = [
{path: '', component: PublicationCreationComponent, canActivate: [authenticationGuard]} { path: '', component: PublicationCreationComponent, canActivate: [authenticationGuard] }
] ]

18
frontend/src/app/pages/publication-update/publication-update.component.html
View File

@@ -1,16 +1,18 @@
@if (isLoading()) { @if ((isLoading$ | async) == true) {
<h2 i18n>Loading publication to edit...</h2> <h2 i18n>Loading publication to edit...</h2>
<mat-spinner/> <mat-spinner></mat-spinner>
} @else { }
@if (publication(); as publication) { @else {
@if (publication) {
<app-publication-edition <app-publication-edition
title="Update publication {{ publication.title }}" title="Update publication {{ publication.title }}"
[publication]="publication" [publication]="publication"
[isSaving]="isSaving()" [isSaving$]="isSaving$"
(publicationSave)="onPublicationSave($event)" (publicationSave)="onPublicationSave($event)"
i18n-title i18n-title>
/> </app-publication-edition>
} @else { }
@else {
<div class="loading-failed"> <div class="loading-failed">
<h1 i18n>Publication failed to load...</h1> <h1 i18n>Publication failed to load...</h1>
</div> </div>

110
frontend/src/app/pages/publication-update/publication-update.component.ts
View File

@@ -1,22 +1,24 @@
import {CommonModule, Location} from '@angular/common'; import { CommonModule, Location } from '@angular/common';
import {Component, effect, inject, Signal, signal} from '@angular/core'; import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import {MatDialogModule} from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import {MatIconModule} from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import {MatSnackBar} from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import {MatTabsModule} from '@angular/material/tabs'; import { MatTabsModule } from '@angular/material/tabs';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import {ActivatedRoute, Router} from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import {PublicationEditionComponent} from '../../components/publication-edition/publication-edition.component'; import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import {Publication} from '../../core/rest-services/publications/model/publication'; import { PublicationEditionComponent } from '../../components/publication-edition/publication-edition.component';
import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service'; import { SubmitButtonComponent } from '../../components/submit-button/submit-button.component';
import {toSignal} from "@angular/core/rxjs-interop"; import { Publication } from '../../core/rest-services/publications/model/publication';
import {map} from "rxjs"; import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
import { PictureSelectionDialog } from '../../components/publication-edition/picture-selection-dialog/picture-selection-dialog.component';
@Component({ @Component({
selector: 'app-publication-update', selector: 'app-publication-update',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
MatDialogModule, MatDialogModule,
@@ -25,69 +27,71 @@ import {map} from "rxjs";
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatTabsModule, MatTabsModule,
MatTooltipModule, MatTooltipModule,
PictureSelectionDialog,
ReactiveFormsModule, ReactiveFormsModule,
SubmitButtonComponent,
PublicationEditionComponent PublicationEditionComponent
], ],
templateUrl: './publication-update.component.html', templateUrl: './publication-update.component.html',
styleUrl: './publication-update.component.scss' styleUrl: './publication-update.component.scss',
}) })
export class PublicationUpdateComponent { export class PublicationUpdateComponent implements OnInit, OnDestroy {
readonly #activatedRoute = inject(ActivatedRoute); private readonly publicationRestService = inject(PublicationRestService);
readonly #location = inject(Location); private readonly activatedRoute = inject(ActivatedRoute);
readonly #publicationRestService = inject(PublicationRestService); private readonly location = inject(Location);
readonly #router = inject(Router); private readonly router = inject(Router);
readonly #snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
#isLoading = signal(false); private isLoadingSubject = new BehaviorSubject<boolean>(false);
#isSavingSubject = signal(false); private isSavingSubject = new BehaviorSubject<boolean>(false);
publication = signal<Publication | undefined>(undefined); private subscriptions: Subscription[] = [];
publication: Publication | undefined;
#publicationId$ = this.#activatedRoute.params get isLoading$(): Observable<boolean> {
.pipe(map(queryParams => queryParams['publicationId'])); return this.isLoadingSubject.asObservable();
#publicationId = toSignal(this.#publicationId$, {initialValue: undefined});
get isLoading(): Signal<boolean> {
return this.#isLoading.asReadonly();
} }
get isSaving(): Signal<boolean> { get isSaving$(): Observable<boolean> {
return this.#isSavingSubject.asReadonly(); return this.isSavingSubject.asObservable();
} }
constructor() { ngOnInit(): void {
effect(() => { this.isLoadingSubject.next(true);
this.#isLoading.set(true); this.activatedRoute.paramMap.subscribe(params => {
const publicationId = params.get('publicationId');
const publicationId = this.#publicationId(); if (publicationId == undefined) {
if (publicationId) { this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
this.#publicationRestService.getById(publicationId) this.location.back();
} else {
this.publicationRestService.getById(publicationId)
.then(publication => { .then(publication => {
this.publication.set(publication); this.publication = publication;
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`; const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
console.error(errorMessage, error) console.error(errorMessage, error)
}) })
.finally(() => this.#isLoading.set(false)); .finally(() => this.isLoadingSubject.next(false));
} else {
this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
this.#location.back();
} }
}); });
} }
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
}
onPublicationSave(publication: Publication): void { onPublicationSave(publication: Publication): void {
this.#isSavingSubject.set(true); this.isSavingSubject.next(true);
this.#publicationRestService.update(publication) this.publicationRestService.update(publication)
.then(() => { .then(() => {
this.#snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, {duration: 5000}); this.snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, { duration: 5000 });
this.#router.navigate(['/home']); this.router.navigate(['/home']);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occured while saving publication modifications.`; const errorMessage = $localize`An error occured while saving publication modifications.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
}) })
.finally(() => this.#isSavingSubject.set(false)); .finally(() => this.isSavingSubject.next(false));
} }
} }

8
frontend/src/app/pages/publication-update/publication-update.routes.ts
View File

@@ -1,7 +1,7 @@
import {Route} from "@angular/router"; import { Route } from "@angular/router";
import {PublicationUpdateComponent} from "./publication-update.component"; import { PublicationUpdateComponent } from "./publication-update.component";
import {authenticationGuard} from "../../core/guard/authentication.guard"; import { authenticationGuard } from "../../core/guard/authentication.guard";
export const ROUTES: Route[] = [ export const ROUTES: Route[] = [
{path: '', component: PublicationUpdateComponent, canActivate: [authenticationGuard]} { path: '', component: PublicationUpdateComponent, canActivate: [authenticationGuard] }
] ]

12
frontend/src/app/pages/publication/publication.component.html
View File

@@ -1,14 +1,14 @@
@if (isLoading()) { @if (isLoading) {
<h2 i18n>Publication content loading...</h2> <h2 i18n>Publication content loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
} @else { } @else {
@if (publication(); as publication) { @if (publication) {
<div class="card"> <div class="card">
<img src="/api/pictures/{{ publication.illustrationId }}"/> <img src="/api/pictures/{{ publication.illustrationId }}" />
<header> <header>
<h1>{{ publication.title }}</h1> <h1>{{ publication.title }}</h1>
<h2>{{ publication.description }}</h2> <h2>{{ publication.description }}</h2>
@if (isAuthorAndUserEquals()) { @if (isAuthorAndUserEquals) {
<a [routerLink]="['edit']" <a [routerLink]="['edit']"
class="button action" class="button action"
matTooltip="Click to edit the publication" matTooltip="Click to edit the publication"
@@ -21,7 +21,7 @@
<main [innerHTML]="publication.parsedText"></main> <main [innerHTML]="publication.parsedText"></main>
<footer> <footer>
<div class="metadata"> <div class="metadata">
<img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/> <img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
<div class="posting-data"> <div class="posting-data">
<span i18n>Publication posted by {{ publication.author.name }}</span> <span i18n>Publication posted by {{ publication.author.name }}</span>
<span class="publication-date"> <span class="publication-date">
@@ -29,7 +29,7 @@
</span> </span>
</div> </div>
</div> </div>
@if (isAuthorAndUserEquals()) { @if (isAuthorAndUserEquals) {
<button type="button" <button type="button"
(click)="deletePublication()" (click)="deletePublication()"
matTooltip="Click to delete the publication" matTooltip="Click to delete the publication"

2
frontend/src/app/pages/publication/publication.component.scss
View File

@@ -11,7 +11,7 @@ $cardBorderRadius: .5em;
max-width: 80em; max-width: 80em;
width: 90%; width: 90%;
border-radius: .5em; border-radius: .5em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
img { img {
height: 12em; height: 12em;

52
frontend/src/app/pages/publication/publication.component.ts
View File

@@ -1,22 +1,23 @@
import {CommonModule, Location} from '@angular/common'; import { CommonModule, Location } from '@angular/common';
import {Component, inject, OnDestroy, OnInit, signal} from '@angular/core'; import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import {MatRippleModule} from '@angular/material/core'; import { MatRippleModule } from '@angular/material/core';
import {MatDialog} from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import {MatIcon} from '@angular/material/icon'; import { MatIcon } from '@angular/material/icon';
import {MatProgressSpinner} from '@angular/material/progress-spinner'; import { MatProgressSpinner } from '@angular/material/progress-spinner';
import {MatSnackBar} from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import {ActivatedRoute, RouterModule} from '@angular/router'; import { ActivatedRoute, RouterModule } from '@angular/router';
import {Subscription} from 'rxjs'; import { Subscription } from 'rxjs';
import {ConfirmationDialog} from '../../components/confirmation-dialog/confirmation-dialog.component'; import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component';
import {Publication} from '../../core/rest-services/publications/model/publication'; import { Publication } from '../../core/rest-services/publications/model/publication';
import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service'; import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
import {AuthenticationService} from '../../core/service/authentication.service'; import { AuthenticationService } from '../../core/service/authentication.service';
declare let Prism: any; declare let Prism: any;
@Component({ @Component({
selector: 'app-publication', selector: 'app-publication',
standalone: true,
templateUrl: './publication.component.html', templateUrl: './publication.component.html',
styleUrl: './publication.component.scss', styleUrl: './publication.component.scss',
imports: [ imports: [
@@ -37,9 +38,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
private readonly snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
private paramMapSubscription?: Subscription; private paramMapSubscription?: Subscription;
private afterDialogCloseSubscription?: Subscription; private afterDialogCloseSubscription?: Subscription;
isLoading = signal(false); isLoading: boolean = false;
isAuthorAndUserEquals = signal(false); isAuthorAndUserEquals: boolean = false;
publication = signal<Publication | null>(null); publication?: Publication;
ngOnInit(): void { ngOnInit(): void {
this.paramMapSubscription = this.activatedRoute this.paramMapSubscription = this.activatedRoute
@@ -48,21 +49,21 @@ export class PublicationComponent implements OnInit, OnDestroy {
const publicationId = params.get('publicationId'); const publicationId = params.get('publicationId');
if (publicationId) { if (publicationId) {
this.isLoading.set(true); this.isLoading = true;
this.publicationRestService.getById(publicationId) this.publicationRestService.getById(publicationId)
.then(publication => { .then(publication => {
this.publication.set(publication); this.publication = publication;
this.isAuthorAndUserEquals.set(this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id); this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
setTimeout(() => Prism.highlightAll(), 100); setTimeout(() => Prism.highlightAll(), 100);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occurred while loading publication...`; const errorMessage = $localize`An error occurred while loading publication...`;
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
console.error(errorMessage, error); console.error(errorMessage, error);
}) })
.finally(() => { .finally(() => {
this.isLoading.set(false); this.isLoading = false;
}); });
} }
}); });
@@ -86,10 +87,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
this.afterDialogCloseSubscription = dialogRef.afterClosed() this.afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(response => { .subscribe(response => {
const publication = this.publication(); if (response && this.publication?.id) {
if (response && publication?.id) { this.publicationRestService.delete(this.publication.id);
this.publicationRestService.delete(publication.id); this.snackBar.open($localize`Publication deleted`, $localize`Close`, { duration: 5000 });
this.snackBar.open($localize`Publication deleted`, $localize`Close`, {duration: 5000});
this.location.back(); this.location.back();
} }
}); });

10
frontend/src/app/pages/search-publications/search-publications.component.html
View File

@@ -1,10 +1,10 @@
<h1 i18n>Search results</h1> <h1 i18n>Search results</h1>
@if (isLoading()) { @if((isLoading$ | async) === true) {
<h2 i18n>Search in progress...</h2> <h2 i18n>Search in progress...</h2>
<mat-spinner/> <mat-spinner></mat-spinner>
} @else if (isLoaded()) { } @else if((isLoaded$ | async) === true) {
@if (publications().length) { @if((publications$ | async)?.length) {
<app-publication-list [publications]="publications()"/> <app-publication-list [publications$]="publications$"></app-publication-list>
} @else { } @else {
<span i18n>No any result.</span> <span i18n>No any result.</span>
} }

47
frontend/src/app/pages/search-publications/search-publications.component.ts
View File

@@ -1,30 +1,28 @@
import {CommonModule} from "@angular/common"; import { CommonModule } from "@angular/common";
import {Component, effect, inject} from "@angular/core"; import { Component, inject, OnDestroy, OnInit } from "@angular/core";
import {MatProgressSpinner} from "@angular/material/progress-spinner"; import { MatProgressSpinner } from "@angular/material/progress-spinner";
import {ActivatedRoute} from "@angular/router"; import { ActivatedRoute } from "@angular/router";
import {PublicationListComponent} from "../../components/publication-list/publication-list.component"; import { Observable, Subscription } from "rxjs";
import {SearchPublicationsService} from "./search-publications.service"; import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
import {toSignal} from "@angular/core/rxjs-interop"; import { Publication } from "../../core/rest-services/publications/model/publication";
import { SearchPublicationsService } from "./search-publications.service";
@Component({ @Component({
selector: 'app-search-publications', selector: 'app-search-publications',
templateUrl: './search-publications.component.html', templateUrl: './search-publications.component.html',
styleUrl: './search-publications.component.scss', styleUrl: './search-publications.component.scss',
standalone: true,
imports: [CommonModule, MatProgressSpinner, PublicationListComponent], imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
providers: [SearchPublicationsService] providers: [SearchPublicationsService]
}) })
export class SearchPublicationsComponent { export class SearchPublicationsComponent implements OnInit, OnDestroy {
private searchPublicationsService = inject(SearchPublicationsService); private searchPublicationsService = inject(SearchPublicationsService);
private activatedRoute = inject(ActivatedRoute); private activatedRoute = inject(ActivatedRoute);
publications = this.searchPublicationsService.publications; private queryParamsSubscription?: Subscription;
isLoading = this.searchPublicationsService.isLoading;
isLoaded = this.searchPublicationsService.isLoaded;
constructor() { ngOnInit(): void {
const queryParams = toSignal(this.activatedRoute.queryParamMap); this.queryParamsSubscription = this.activatedRoute.queryParamMap
effect(() => { .subscribe(params => {
let params = queryParams();
if (params) {
const categoryId = params.get('category-id'); const categoryId = params.get('category-id');
if (categoryId) { if (categoryId) {
this.searchPublicationsService.loadPublications(`category_id=${categoryId}`); this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
@@ -33,7 +31,22 @@ export class SearchPublicationsComponent {
if (query) { if (query) {
this.searchPublicationsService.loadPublications(query); this.searchPublicationsService.loadPublications(query);
} }
}
}); });
} }
ngOnDestroy(): void {
this.queryParamsSubscription?.unsubscribe();
}
get publications$(): Observable<Publication[]> {
return this.searchPublicationsService.publications$;
}
get isLoading$(): Observable<boolean> {
return this.searchPublicationsService.isLoading$;
}
get isLoaded$(): Observable<boolean> {
return this.searchPublicationsService.isLoaded$;
}
} }

48
frontend/src/app/pages/search-publications/search-publications.service.ts
View File

@@ -1,47 +1,49 @@
import {inject, Injectable, Signal, signal} from "@angular/core"; import { inject, Injectable } from "@angular/core";
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service"; import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
import {Publication} from "../../core/rest-services/publications/model/publication"; import { BehaviorSubject, Observable } from "rxjs";
import {MatSnackBar} from "@angular/material/snack-bar"; import { Publication } from "../../core/rest-services/publications/model/publication";
import { MatSnackBar } from "@angular/material/snack-bar";
@Injectable() @Injectable()
export class SearchPublicationsService { export class SearchPublicationsService {
#snackBar = inject(MatSnackBar); private publicationRestService = inject(PublicationRestService);
#publicationRestService = inject(PublicationRestService); private publicationsSubject = new BehaviorSubject<Publication[]>([]);
#publications = signal<Publication[]>([]); private isLoadingSubject = new BehaviorSubject<boolean>(false);
#isLoading = signal(false); private isLoadedSubject = new BehaviorSubject<boolean>(false);
#isLoaded = signal(false); private snackBar = inject(MatSnackBar);
get publications(): Signal<Publication[]> { get publications$(): Observable<Publication[]> {
return this.#publications.asReadonly(); return this.publicationsSubject.asObservable();
} }
get isLoading(): Signal<boolean> { get isLoading$(): Observable<boolean> {
return this.#isLoading.asReadonly(); return this.isLoadingSubject.asObservable();
} }
get isLoaded(): Signal<boolean> { get isLoaded$(): Observable<boolean> {
return this.#isLoaded.asReadonly(); return this.isLoadedSubject.asObservable();
} }
loadPublications(searchCriteria: string): void { loadPublications(searchCriteria: string): void {
this.#isLoading.set(true); this.isLoadingSubject.next(true);
this.#isLoaded.set(false); this.isLoadedSubject.next(false);
this.#publications.set([]); this.publicationsSubject.next([]);
this.#publicationRestService.search(searchCriteria) this.publicationRestService.search(searchCriteria)
.then(publications => { .then(publications => {
this.#publications.set(publications); this.publicationsSubject.next(publications);
}) })
.catch(error => { .catch(error => {
if (error.status !== 404) { if (error.status !== 404) {
const errorMessage = $localize`An error occured while retrieving publications.`; const errorMessage = $localize`An error occured while retrieving publications.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
} }
}) })
.finally(() => { .finally(() => {
this.#isLoading.set(false); this.isLoadingSubject.next(false);
this.#isLoaded.set(true); this.isLoadedSubject.next(true);
}); });
} }
} }

8
frontend/src/app/pages/signin/signin.component.html
View File

@@ -6,7 +6,7 @@
Pseudo Pseudo
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required/> <input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required />
</div> </div>
<div class="form-field"> <div class="form-field">
<mat-icon>mail</mat-icon> <mat-icon>mail</mat-icon>
@@ -14,7 +14,7 @@
Email address Email address
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="email" id="email" formControlName="email" autocomplete="email" required/> <input type="email" id="email" formControlName="email" autocomplete="email" required />
</div> </div>
<div class="form-field"> <div class="form-field">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
@@ -22,7 +22,7 @@
Password Password
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="password" id="password" formControlName="password" required/> <input type="password" id="password" formControlName="password" required />
</div> </div>
<div class="form-field"> <div class="form-field">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
@@ -30,7 +30,7 @@
Confirm password Confirm password
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="password" id="confirm-password" formControlName="confirmPassword" required/> <input type="password" id="confirm-password" formControlName="confirmPassword" required />
</div> </div>
<div class="actions reversed"> <div class="actions reversed">
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button> <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>

29
frontend/src/app/pages/signin/signin.component.ts
View File

@@ -1,16 +1,17 @@
import {Component, inject, OnDestroy, OnInit} from '@angular/core'; import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import {MatIconModule} from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import {RouterModule} from '@angular/router'; import { RouterModule } from '@angular/router';
import {debounceTime, distinctUntilChanged, map, Subscription} from 'rxjs'; import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
import {SigninService} from './signin.service'; import { SigninService } from './signin.service';
import {LoginService} from '../login/login.service'; import { LoginService } from '../login/login.service';
import {FormError} from '../../core/model/FormError'; import { FormError } from '../../core/model/FormError';
import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component"; import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
import {MatRippleModule} from '@angular/material/core'; import { MatRippleModule } from '@angular/material/core';
@Component({ @Component({
selector: 'app-signin', selector: 'app-signin',
standalone: true,
templateUrl: './signin.component.html', templateUrl: './signin.component.html',
styleUrl: './signin.component.scss', styleUrl: './signin.component.scss',
imports: [ imports: [
@@ -83,10 +84,10 @@ export class SigninComponent implements OnInit, OnDestroy {
const stateSubscription = this.signinService.state$ const stateSubscription = this.signinService.state$
.subscribe(state => { .subscribe(state => {
this.signinForm.controls['pseudo'].setValue(state.request.pseudo, {emitEvent: false}); this.signinForm.controls['pseudo'].setValue(state.request.pseudo, { emitEvent: false });
this.signinForm.controls['email'].setValue(state.request.email, {emitEvent: false}); this.signinForm.controls['email'].setValue(state.request.email, { emitEvent: false });
this.signinForm.controls['password'].setValue(state.request.password, {emitEvent: false}); this.signinForm.controls['password'].setValue(state.request.password, { emitEvent: false });
this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, {emitEvent: false}); this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, { emitEvent: false });
}); });
this.subscriptions.push(stateSubscription); this.subscriptions.push(stateSubscription);
} }

18
frontend/src/app/pages/signin/signin.service.ts
View File

@@ -1,12 +1,12 @@
import {inject, Injectable} from '@angular/core'; import { Injectable, inject } from '@angular/core';
import {SigninRequest} from '../../core/rest-services/user/model/signin.model'; import { SigninRequest } from '../../core/rest-services/user/model/signin.model';
import {FormError} from '../../core/model/FormError'; import { FormError } from '../../core/model/FormError';
import {BehaviorSubject, Observable} from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import {copy} from '../../core/utils/ObjectUtils'; import { copy } from '../../core/utils/ObjectUtils';
import {UserRestService} from '../../core/rest-services/user/user.rest-service'; import { UserRestService } from '../../core/rest-services/user/user.rest-service';
import {MatSnackBar} from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import {Router} from '@angular/router'; import { Router } from '@angular/router';
import {LoginService} from '../login/login.service'; import { LoginService } from '../login/login.service';
export interface SigninState { export interface SigninState {
request: SigninRequest; request: SigninRequest;

2
frontend/src/design_system/form.scss
View File

@@ -6,7 +6,7 @@ form.cod-form {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 1em; gap: 1em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
border-radius: .5em; border-radius: .5em;
padding: 1em 1.5em; padding: 1em 1.5em;
background-color: #ffffff; background-color: #ffffff;

8
frontend/src/index.html
View File

@@ -8,11 +8,11 @@
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="./assets/css/prism.css" rel="stylesheet"/> <link href="./assets/css/prism.css" rel="stylesheet" />
</head> </head>
<body class="mat-typography"> <body class="mat-typography">
<app-root></app-root> <app-root></app-root>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
<script type="text/javascript" src="./assets/js/prism.js"></script> <script type="text/javascript" src="./assets/js/prism.js"></script>
</body> </body>
</html> </html>

6
frontend/src/locale/messages-fr.json
View File

@@ -3,7 +3,7 @@
"translations": { "translations": {
"3603720768157919481": "Non", "3603720768157919481": "Non",
"4861926948802653243": "Oui", "4861926948802653243": "Oui",
"9101236728284262962": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2026 Tous droits réservés - 2.2 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}", "6130235414952256120": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 Tous droits réservés - 2.1 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
"9214089025589249203": "Les indicateurs de vie du site seront disponibles ultérieurement...", "9214089025589249203": "Les indicateurs de vie du site seront disponibles ultérieurement...",
"1711651175531679766": "La documentation sera disponible ultérieurement...", "1711651175531679766": "La documentation sera disponible ultérieurement...",
"6299155290121808295": "Développements realisés par", "6299155290121808295": "Développements realisés par",
@@ -22,8 +22,8 @@
"4111988153902305972": "Choisir cette illustation", "4111988153902305972": "Choisir cette illustation",
"4491342806775118195": "Il n'y a aucune image.", "4491342806775118195": "Il n'y a aucune image.",
"5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Ajouter une nouvelle image", "5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Ajouter une nouvelle image",
"2175978098886350409": "Une erreur est survenue lors du chargements de vos images.", "6852365376059142995": "Une erreur est survenue lors du chargements de vos images.",
"2334964899406832924": "Une erreur technique est survenue lors de l'ajout de votre image.", "6198966268398913224": "Une erreur technique est survenue lors de l'ajout de votre image.",
"3603937053948195893": "Édition", "3603937053948195893": "Édition",
"5701618810648052610": "Titre", "5701618810648052610": "Titre",
"4902817035128594900": "Description", "4902817035128594900": "Description",

6
frontend/src/locale/messages.json
View File

@@ -3,7 +3,7 @@
"translations": { "translations": {
"3603720768157919481": " No ", "3603720768157919481": " No ",
"4861926948802653243": " Yes ", "4861926948802653243": " Yes ",
"9101236728284262962": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2026 All rights reserved - 2.2 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}", "6130235414952256120": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 All rights reserved - 2.1 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
"9214089025589249203": "Health checking will be available in future...", "9214089025589249203": "Health checking will be available in future...",
"1711651175531679766": "Documentation will be available in future...", "1711651175531679766": "Documentation will be available in future...",
"6299155290121808295": "Development realised by", "6299155290121808295": "Development realised by",
@@ -22,8 +22,8 @@
"4111988153902305972": "Choose this illustration", "4111988153902305972": "Choose this illustration",
"4491342806775118195": "There is no any picture.", "4491342806775118195": "There is no any picture.",
"5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Add new picture ", "5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Add new picture ",
"2175978098886350409": "An error occurred while loading pictures.", "6852365376059142995": "An error occured while loading pictures.",
"2334964899406832924": "A technical error occurred while uploading your picture.", "6198966268398913224": "A technical error occured while uploading your picture.",
"3603937053948195893": "Edition", "3603937053948195893": "Edition",
"5701618810648052610": "Title", "5701618810648052610": "Title",
"4902817035128594900": "Description", "4902817035128594900": "Description",

6
frontend/src/main.ts
View File

@@ -1,8 +1,8 @@
/// <reference types="@angular/localize" /> /// <reference types="@angular/localize" />
import {bootstrapApplication} from '@angular/platform-browser'; import { bootstrapApplication } from '@angular/platform-browser';
import {appConfig} from './app/app.config'; import { appConfig } from './app/app.config';
import {AppComponent} from './app/app.component'; import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig) bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err)); .catch((err) => console.error(err));

5
frontend/src/styles.scss
View File

@@ -1,10 +1,7 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@use './design_system/index.scss'; @use './design_system/index.scss';
html, body { html, body { height: 100%; }
height: 100%;
}
body { body {
margin: 0; margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif; font-family: Roboto, "Helvetica Neue", sans-serif;

Some files were not shown because too many files have changed in this diff Show More