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

12
.gitignore vendored
View File

@@ -83,4 +83,14 @@ testem.log
.DS_Store .DS_Store
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")

40
frontend/angular.json
View File

@@ -19,18 +19,18 @@
"fr": { "fr": {
"translation": "src/locale/messages-fr.json" "translation": "src/locale/messages-fr.json"
} }
} }
}, },
"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": "."
}
} }
} }

13023
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.html
View File

@@ -1,5 +1,5 @@
<app-header></app-header> <app-header></app-header>
<main> <main>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
<app-footer></app-footer> <app-footer></app-footer>

24
frontend/src/app/app.component.scss
View File

@@ -1,14 +1,14 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
app-header {
width: 100%;
}
main {
flex: 1; flex: 1;
padding: 1em 0;
} app-header {
} width: 100%;
}
main {
flex: 1;
padding: 1em 0;
}
}

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

28
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: [
@@ -15,13 +15,15 @@ export const appConfig: ApplicationConfig = {
paramsInheritanceStrategy: 'always', paramsInheritanceStrategy: 'always',
onSameUrlNavigation: 'reload' onSameUrlNavigation: 'reload'
}) })
), ),
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
}
] ]
}; };

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

@@ -1,43 +1,43 @@
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 = [
{ {
path: 'login', path: 'login',
loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent), loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent),
canActivate: [alreadyAuthenticatedGuard] canActivate: [alreadyAuthenticatedGuard]
}, },
{ {
path: 'signin', path: 'signin',
loadComponent: () => import('./pages/signin/signin.component').then(module => module.SigninComponent), loadComponent: () => import('./pages/signin/signin.component').then(module => module.SigninComponent),
canActivate: [alreadyAuthenticatedGuard] canActivate: [alreadyAuthenticatedGuard]
}, },
{ {
path: 'disconnect', path: 'disconnect',
loadComponent: () => import('./pages/disconnection/disconnection.component').then(module => module.DisconnectionComponent) loadComponent: () => import('./pages/disconnection/disconnection.component').then(module => module.DisconnectionComponent)
}, },
{ {
path: 'publications/new', path: 'publications/new',
loadChildren: () => import('./pages/publication-creation/publication-creation.routes').then(module => module.ROUTES) loadChildren: () => import('./pages/publication-creation/publication-creation.routes').then(module => module.ROUTES)
}, },
{ {
path: 'publications/:publicationId', path: 'publications/:publicationId',
loadComponent: () => import('./pages/publication/publication.component').then(module => module.PublicationComponent) loadComponent: () => import('./pages/publication/publication.component').then(module => module.PublicationComponent)
}, },
{ {
path: 'publications/:publicationId/edit', path: 'publications/:publicationId/edit',
loadChildren: () => import('./pages/publication-update/publication-update.routes').then(module => module.ROUTES) loadChildren: () => import('./pages/publication-update/publication-update.routes').then(module => module.ROUTES)
}, },
{ {
path: 'publications', path: 'publications',
loadComponent: () => import('./pages/search-publications/search-publications.component').then(module => module.SearchPublicationsComponent) loadComponent: () => import('./pages/search-publications/search-publications.component').then(module => module.SearchPublicationsComponent)
}, },
{ {
path: 'my-publications', path: 'my-publications',
loadChildren: () => import('./pages/my-publications/my-publications.routes').then(module => module.ROUTES) loadChildren: () => import('./pages/my-publications/my-publications.routes').then(module => module.ROUTES)
}, },
{ {
path: '**', path: '**',
loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent) loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent)
} }
]; ];

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

@@ -1,10 +1,10 @@
<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
</button> </button>
<button type="button" class="cod-button" (click)="closeAndValidate()" matRipple i18n> <button type="button" class="cod-button" (click)="closeAndValidate()" matRipple i18n>
Yes Yes
</button> </button>
</footer> </footer>

20
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss
View File

@@ -1,12 +1,12 @@
:host { :host {
display: flex;
flex-direction: column;
text-align: center;
padding: 1em;
footer {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-between; text-align: center;
} padding: 1em;
}
footer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}

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

@@ -1,35 +1,36 @@
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;
description: string; description: string;
} }
@Component({ @Component({
selector: 'app-confirmation-dialog', selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html', standalone: true,
styleUrl: './confirmation-dialog.component.scss', templateUrl: './confirmation-dialog.component.html',
imports: [MatRippleModule] styleUrl: './confirmation-dialog.component.scss',
imports: [MatRippleModule]
}) })
export class ConfirmationDialog { export class ConfirmationDialog {
private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>); private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
data: ConfirmationDialogData = inject(MAT_DIALOG_DATA); data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
get title(): string { get title(): string {
return this.data.title; return this.data.title;
} }
get description(): string { get description(): string {
return this.data.description; return this.data.description;
} }
closeAndValidate(): void { closeAndValidate(): void {
this.dialogRef.close(true); this.dialogRef.close(true);
} }
closeDialog(): void { closeDialog(): void {
this.dialogRef.close(false); this.dialogRef.close(false);
} }
} }

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

@@ -1,14 +1,14 @@
<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>
</div> </div>
<div> <div>
<mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon> <mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon>
- -
<span i18n>Development realised by</span> Florian THIERRY <span i18n>Development realised by</span> Florian THIERRY
</div> </div>

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

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

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 {
} }

72
frontend/src/app/components/header/header.component.html
View File

@@ -1,44 +1,44 @@
<div class="left"> <div class="left">
<button type="button" <button type="button"
(click)="sideMenu.open()" (click)="sideMenu.open()"
class="cod-button icon" class="cod-button icon"
matTooltip="Click to show side menu" matTooltip="Click to show side menu"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<a [routerLink]="['/home']"> <a [routerLink]="['/home']">
<img src="assets/images/codiki.png" alt="logo"/> <img src="assets/images/codiki.png" alt="logo"/>
<span class="title">Codiki</span> <span class="title">Codiki</span>
</a> </a>
</div> </div>
<div class="middle"> <div class="middle">
<app-publications-search-bar></app-publications-search-bar> <app-publications-search-bar></app-publications-search-bar>
</div> </div>
<div class="right"> <div class="right">
@if (isAuthenticated) { @if (isAuthenticated) {
<button type="button" <button type="button"
class="cod-button icon" class="cod-button icon"
[matMenuTriggerFor]="authenticatedUserMenu" [matMenuTriggerFor]="authenticatedUserMenu"
matRipple> matRipple>
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #authenticatedUserMenu="matMenu"> <mat-menu #authenticatedUserMenu="matMenu">
<div class="authenticated-user-menu"> <div class="authenticated-user-menu">
<a [routerLink]="['/my-publications']" matRipple i18n> <a [routerLink]="['/my-publications']" matRipple i18n>
<mat-icon>description</mat-icon> <mat-icon>description</mat-icon>
My publications My publications
</a> </a>
<a [routerLink]="['/disconnect']" matRipple class="disconnection" i18n> <a [routerLink]="['/disconnect']" matRipple class="disconnection" i18n>
<mat-icon>logout</mat-icon> <mat-icon>logout</mat-icon>
Disconnect Disconnect
</a> </a>
</div> </div>
</mat-menu> </mat-menu>
} @else { } @else {
<a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a> <a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a>
} }
</div> </div>
<app-side-menu #sideMenu></app-side-menu> <app-side-menu #sideMenu></app-side-menu>

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

@@ -1,148 +1,148 @@
$headerHeight: 3.5em; $headerHeight: 3.5em;
:host { :host {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #3f51b5;
color: white;
position: relative;
height: $headerHeight;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: space-between;
background-color: #3f51b5;
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);
&.left { div {
position: absolute;
top: 0;
left: 0;
align-items: center;
gap: 1em;
padding: 0 1em;
z-index: 2;
a {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; position: relative;
color: white; height: $headerHeight;
text-decoration: none;
gap: .5em;
img { &.left {
$imageSize: 2em; position: absolute;
width: $imageSize; top: 0;
height: $imageSize; left: 0;
align-items: center;
gap: 1em;
padding: 0 1em;
z-index: 2;
a {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: white;
text-decoration: none;
gap: .5em;
img {
$imageSize: 2em;
width: $imageSize;
height: $imageSize;
}
.title {
font-size: 1.5em;
display: none;
@media screen and (min-width: 600px) {
display: block;
}
}
}
} }
.title { &.middle {
font-size: 1.5em; flex: 1;
display: none; $borderRadiusValue: 10em;
position: relative;
transition: max-width .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
app-publications-search-bar {
width: 100%;
max-width: 12em;
@media screen and (min-width: 600px) { @media screen and (min-width: 435px) {
display: block; max-width: 16em;
} }
@media screen and (min-width: 500px) {
max-width: 20em;
}
@media screen and (min-width: 700px) {
max-width: 24em;
}
@media screen and (min-width: 800px) {
max-width: 32em;
}
@media screen and (min-width: 900px) {
max-width: 38em;
}
@media screen and (min-width: 1000px) {
max-width: 45em;
}
@media screen and (min-width: 1100px) {
max-width: 50em;
}
}
}
&.right {
position: absolute;
top: 0;
right: 0;
z-index: 2;
margin-right: .5em;
a, button {
margin: .5em;
}
} }
}
} }
&.middle {
flex: 1;
$borderRadiusValue: 10em;
position: relative;
transition: max-width .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
app-publications-search-bar {
width: 100%;
max-width: 12em;
@media screen and (min-width: 435px) {
max-width: 16em;
}
@media screen and (min-width: 500px) {
max-width: 20em;
}
@media screen and (min-width: 700px) {
max-width: 24em;
}
@media screen and (min-width: 800px) {
max-width: 32em;
}
@media screen and (min-width: 900px) {
max-width: 38em;
}
@media screen and (min-width: 1000px) {
max-width: 45em;
}
@media screen and (min-width: 1100px) {
max-width: 50em;
}
}
}
&.right {
position: absolute;
top: 0;
right: 0;
z-index: 2;
margin-right: .5em;
a, button {
margin: .5em;
}
}
}
} }
app-side-menu { app-side-menu {
height: 100%; height: 100%;
} }
.authenticated-user-menu { .authenticated-user-menu {
display: flex;
flex-direction: column;
padding: 0.2em 0;
a {
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; padding: 0.2em 0;
text-decoration: none;
background-color: white;
color: black;
padding: 1em;
gap: .5em;
transition: background-color .2s ease-in-out, color .2s ease-in-out;
&:hover { a {
background-color: #5c6bc0; flex: 1;
color: white; display: flex;
flex-direction: row;
align-items: center;
text-decoration: none;
background-color: white;
color: black;
padding: 1em;
gap: .5em;
transition: background-color .2s ease-in-out, color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
color: white;
}
&.disconnection {
color: #D50000;
&:hover {
background-color: #E53935;
color: white;
}
}
} }
}
&.disconnection {
color: #D50000;
&:hover {
background-color: #E53935;
color: white;
}
}
}
}

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);

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

@@ -4,34 +4,34 @@
matTooltip="Close" matTooltip="Close"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<header> <header>
<h1 i18n>Add a code block</h1> <h1 i18n>Add a code block</h1>
</header> </header>
<form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate> <form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
<div class="form-content"> <div class="form-content">
<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>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label i18n>Code block</mat-label> <mat-label i18n>Code block</mat-label>
<textarea matInput formControlName="codeBlock"></textarea> <textarea matInput formControlName="codeBlock"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="actions reversed"> <div class="actions reversed">
<button type="submit" class="cod-button" matRipple i18n> <button type="submit" class="cod-button" matRipple i18n>
Validate Validate
</button> </button>
<button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n> <button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>

52
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss
View File

@@ -1,30 +1,30 @@
:host { :host {
display: flex;
flex-direction: column;
padding: 1em;
gap: 1em;
position: relative;
max-height: 90vh;
header {
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: center; padding: 1em;
align-items: center; gap: 1em;
} position: relative;
max-height: 90vh;
form { header {
div { flex: 1;
&.form-content { display: flex;
mat-form-field { flex-direction: row;
width: 100%; justify-content: center;
align-items: center;
textarea {
height: 30vh;
}
}
}
} }
}
} form {
div {
&.form-content {
mat-form-field {
width: 100%;
textarea {
height: 30vh;
}
}
}
}
}
}

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

@@ -1,119 +1,120 @@
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;
label: string; label: string;
} }
export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
{ {
code: 'bash', code: 'bash',
label: 'Bash' label: 'Bash'
}, },
{ {
code: 'c', code: 'c',
label: 'C' label: 'C'
}, },
{ {
code: 'cpp', code: 'cpp',
label: 'C++' label: 'C++'
}, },
{ {
code: 'cs', code: 'cs',
label: 'C#' label: 'C#'
}, },
{ {
code: 'lua', code: 'lua',
label: 'Lua' label: 'Lua'
}, },
{ {
code: 'java', code: 'java',
label: 'Java' label: 'Java'
}, },
{ {
code: 'json5', code: 'json5',
label: 'JSON' label: 'JSON'
}, },
{ {
code: 'kt', code: 'kt',
label: 'Kotlin' label: 'Kotlin'
}, },
{ {
code: 'markup', code: 'markup',
label: 'html/xml' label: 'html/xml'
}, },
{ {
code: 'php', code: 'php',
label: 'PHP' label: 'PHP'
}, },
{ {
code: 'plsql', code: 'plsql',
label: 'PL/SQL' label: 'PL/SQL'
}, },
{ {
code: 'python', code: 'python',
label: 'Python' label: 'Python'
}, },
{ {
code: 'powershell', code: 'powershell',
label: 'PowerShell' label: 'PowerShell'
}, },
{ {
code: 'rust', code: 'rust',
label: 'Rust' label: 'Rust'
}, },
{ {
code: 'sql', code: 'sql',
label: 'SQL' label: 'SQL'
}, },
{ {
code: 'ts', code: 'ts',
label: 'Typescript' label: 'Typescript'
}, },
{ {
code: 'yml', code: 'yml',
label: 'YAML' label: 'YAML'
}, },
]; ];
@Component({ @Component({
selector: 'app-code-block-dialog', selector: 'app-code-block-dialog',
templateUrl: './code-block-dialog.component.html', standalone: true,
styleUrl: './code-block-dialog.component.scss', templateUrl: './code-block-dialog.component.html',
imports: [ styleUrl: './code-block-dialog.component.scss',
MatFormFieldModule, imports: [
MatIcon, MatFormFieldModule,
MatInputModule, MatIcon,
MatRippleModule, MatInputModule,
MatSelectModule, MatRippleModule,
MatTooltip, MatSelectModule,
ReactiveFormsModule, MatTooltip,
] ReactiveFormsModule,
]
}) })
export class CodeBlockDialog { export class CodeBlockDialog {
private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>); private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
private formBuilder = inject(FormBuilder); private formBuilder = inject(FormBuilder);
programmingLanguages = PROGRAMMING_LANGUAGES; programmingLanguages = PROGRAMMING_LANGUAGES;
formGroup = this.formBuilder.group({ formGroup = this.formBuilder.group({
programmingLanguage: new FormControl('', Validators.required), programmingLanguage: new FormControl('', Validators.required),
codeBlock: new FormControl('', Validators.required) codeBlock: new FormControl('', Validators.required)
}); });
closeAndValidate(): void { closeAndValidate(): void {
if (this.formGroup.valid) { if (this.formGroup.valid) {
this.dialogRef.close(this.formGroup.value); this.dialogRef.close(this.formGroup.value);
}
} }
}
closeDialog(): void { closeDialog(): void {
this.dialogRef.close(); this.dialogRef.close();
} }
} }

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

@@ -4,41 +4,40 @@
matTooltip="Close" matTooltip="Close"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<header> <header>
<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 {
@if (pictures.length) {
@for (picture of pictures; track picture) {
<img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration"
i18n-matTooltip/>
}
} @else { } @else {
<h2 i18n>There is no any picture.</h2> @if (pictures.length) {
@for(picture of pictures; track picture) {
<img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration" i18n-matTooltip/>
}
} @else {
<h2 i18n>There is no any picture.</h2>
}
} }
}
</div> </div>
<footer> <footer>
<button type="button" <button type="button"
(click)="closeDialog()" (click)="closeDialog()"
class="cod-button secondary" class="cod-button secondary"
matRipple matRipple
i18n> i18n>
Cancel Cancel
</button> </button>
<button type="button" <button type="button"
(click)="fileUpload.click()" (click)="fileUpload.click()"
class="cod-button" class="cod-button"
matRipple matRipple
i18n> i18n>
<mat-icon>upload_file</mat-icon> <mat-icon>upload_file</mat-icon>
Add new picture Add new picture
</button> </button>
<input type="file" (change)="uploadPicture($event)" #fileUpload/> <input type="file" (change)="uploadPicture($event)" #fileUpload/>
</footer> </footer>

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

@@ -1,83 +1,83 @@
:host { :host {
display: flex;
flex-direction: column;
padding: 1em;
gap: 1em;
position: relative;
max-height: 90vh;
header {
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: center; padding: 1em;
align-items: center;
}
.picture-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1em; gap: 1em;
max-height: 30em; position: relative;
overflow-y: auto; max-height: 90vh;
min-height: 10em;
padding: .5em 0;
img { header {
width: 15em; flex: 1;
height: 10em; display: flex;
object-fit: cover; flex-direction: row;
border-radius: 1em; justify-content: center;
opacity: .9; align-items: center;
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;
&:hover {
cursor: pointer;
opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
}
} }
}
footer { .picture-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; flex-wrap: wrap;
align-items: center; justify-content: center;
align-items: center;
gap: 1em;
max-height: 30em;
overflow-y: auto;
min-height: 10em;
padding: .5em 0;
button { img {
padding: .8em 1.2em; width: 15em;
border-radius: 10em; height: 10em;
border: none; object-fit: cover;
background-color: #3f51b5; border-radius: 1em;
color: white; opacity: .9;
transition: background-color .2s ease-in-out; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
cursor: pointer; transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
&:hover { &:hover {
background-color: #5b6ed8; cursor: pointer;
} opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
&.secondary { }
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
} }
}
} }
input[type=file] { footer {
display: none; display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
}
}
}
input[type=file] {
display: none;
}
} }
} }
}

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

@@ -1,74 +1,75 @@
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',
templateUrl: './picture-selection-dialog.component.html', standalone: true,
styleUrl: './picture-selection-dialog.component.scss', templateUrl: './picture-selection-dialog.component.html',
imports: [ styleUrl: './picture-selection-dialog.component.scss',
MatIcon, imports: [
MatRippleModule, MatIcon,
MatProgressSpinnerModule, MatRippleModule,
MatTooltip MatProgressSpinnerModule,
] 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;
}) })
.catch(error => { .catch(error => {
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;
}); });
}
selectPicture(picture: Picture): void {
this.dialogRef.close(picture.id);
}
closeDialog(): void {
this.dialogRef.close();
}
uploadPicture(fileSelectionEvent: any): void {
const pictureFile = fileSelectionEvent.target.files[0];
if (pictureFile) {
this.pictureRestService.uploadPicture(pictureFile)
.then(pictureId => {
this.dialogRef.close(pictureId);
})
.catch(error => {
const errorMessage = $localize`A technical error occurred while uploading your picture.`;
console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
});
} }
}
} selectPicture(picture: Picture): void {
this.dialogRef.close(picture.id);
}
closeDialog(): void {
this.dialogRef.close();
}
uploadPicture(fileSelectionEvent: any): void {
const pictureFile = fileSelectionEvent.target.files[0];
if (pictureFile) {
this.pictureRestService.uploadPicture(pictureFile)
.then(pictureId => {
this.dialogRef.close(pictureId);
})
.catch(error => {
const errorMessage = $localize`A technical error occured while uploading your picture.`;
console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
});
}
}
}

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

@@ -1,24 +1,24 @@
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 {
private pictureRestService = inject(PictureRestService); private pictureRestService = inject(PictureRestService);
private snackBar = inject(MatSnackBar); private snackBar = inject(MatSnackBar);
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>); private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
uploadPicture(pictureFile: File): void { uploadPicture(pictureFile: File): void {
this.pictureRestService.uploadPicture(pictureFile) this.pictureRestService.uploadPicture(pictureFile)
.then(pictureId => { .then(pictureId => {
this.dialogRef.close(pictureId); this.dialogRef.close(pictureId);
}) })
.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 });
}); });
} }
} }

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

@@ -1,133 +1,132 @@
<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)">
<mat-tab label="Edition" i18n-label> <mat-tab label="Edition" i18n-label>
<div class="form-content"> <div class="form-content">
<div class="first-part"> <div class="first-part">
<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>
<mat-select formControlName="categoryId"> <mat-select formControlName="categoryId">
@for (category of categories$ | async; track category) { @for (category of categories$ | async; track category) {
<mat-option [value]="category.id"> <mat-option [value]="category.id">
{{ category.name }} {{ category.name }}
</mat-option> </mat-option>
} }
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</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/> </div>
</div> </div>
</div>
<div class="actions"> <div class="actions">
<button type="button" <button type="button"
(click)="insertTitle(1)" (click)="insertTitle(1)"
matTooltip="Click to insert a title 1 section" matTooltip="Click to insert a title 1 section"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
H1 H1
</button> </button>
<button type="button" <button type="button"
(click)="insertTitle(2)" (click)="insertTitle(2)"
matTooltip="Click to insert a title 2 section" matTooltip="Click to insert a title 2 section"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
H2 H2
</button> </button>
<button type="button" <button type="button"
(click)="insertTitle(3)" (click)="insertTitle(3)"
matTooltip="Click to insert a title 3 section" matTooltip="Click to insert a title 3 section"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
H3 H3
</button> </button>
<button type="button" <button type="button"
(click)="insertLink()" (click)="insertLink()"
matTooltip="Click to insert a link" matTooltip="Click to insert a link"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>link</mat-icon> <mat-icon>link</mat-icon>
</button> </button>
<button type="button" <button type="button"
(click)="selectAPicture()" (click)="selectAPicture()"
matTooltip="Click to insert a picture" matTooltip="Click to insert a picture"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>image</mat-icon> <mat-icon>image</mat-icon>
</button> </button>
<button type="button" <button type="button"
(click)="displayCodeBlockDialog()" (click)="displayCodeBlockDialog()"
matTooltip="Click to insert a code block" matTooltip="Click to insert a code block"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>code</mat-icon> <mat-icon>code</mat-icon>
</button> </button>
<button type="button" <button type="button"
matTooltip="Click to display editor help" matTooltip="Click to display editor help"
disabled disabled
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>help</mat-icon> <mat-icon>help</mat-icon>
</button> </button>
</div> </div>
<mat-form-field> <mat-form-field>
<mat-label i18n>Content</mat-label> <mat-label i18n>Content</mat-label>
<textarea <textarea
#textArea #textArea
matInput matInput
formControlName="text" formControlName="text"
class="text-input" class="text-input"
(keyup)="updateCursorPosition($event)" (keyup)="updateCursorPosition($event)"
(click)="updateCursorPosition($event)"> (click)="updateCursorPosition($event)">
</textarea> </textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-tab> </mat-tab>
<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()"
matRipple matRipple
i18n> i18n>
Cancel Cancel
</button> </button>
</footer> </footer>
</form> </form>

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

@@ -1,170 +1,170 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
form { form {
margin: 1em; margin: 1em;
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;
background-color: #3f51b5; background-color: #3f51b5;
color: white; color: white;
border-radius: .5em .5em 0 0; border-radius: .5em .5em 0 0;
h1 { h1 {
font-size: 2em; font-size: 2em;
margin-bottom: .5em; margin-bottom: .5em;
} }
}
footer {
padding: 2em;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
} }
footer {
padding: 2em;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
}
} }
.form-content { .form-content {
padding: 2em; padding: 2em;
padding-bottom: 0; padding-bottom: 0;
display: flex;
flex-direction: column;
gap: .5em;
mat-form-field {
textarea {
height: 20em;
}
}
.first-part {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column;
gap: 1em;
@media screen and (min-width: 600px) {
flex-direction: row;
div {
flex: 1 0;
&.picture-container {
max-width: 20em;
img {
max-height: 15em;
max-width: 20em;
}
}
}
}
div {
flex: 1 0 50%;
display: flex;
flex-direction: column;
justify-content: center;
&.picture-container {
img {
flex: 1;
object-fit: cover;
width: 100%;
cursor: pointer;
border-radius: 1em;
opacity: .9;
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;
&:hover {
cursor: pointer;
opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
}
}
}
}
}
.actions {
display: flex;
flex-direction: row;
gap: .5em; gap: .5em;
button { mat-form-field {
padding: 0; textarea {
border-radius: 10em; height: 20em;
border: none; }
background-color: #3f51b5; }
color: white;
transition: background-color .2s ease-in-out; .first-part {
display: flex; display: flex;
justify-content: center; flex-direction: column-reverse;
align-items: center; gap: 1em;
width: 3em;
height: 3em; @media screen and (min-width: 600px) {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); flex-direction: row;
font-weight: bold;
div {
&:hover { flex: 1 0;
background-color: #5b6ed8;
cursor: pointer; &.picture-container {
} max-width: 20em;
&:disabled { img {
background-color: #5f6aa6; max-height: 15em;
cursor: not-allowed; max-width: 20em;
} }
}
}
}
div {
flex: 1 0 50%;
display: flex;
flex-direction: column;
justify-content: center;
&.picture-container {
img {
flex: 1;
object-fit: cover;
width: 100%;
cursor: pointer;
border-radius: 1em;
opacity: .9;
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;
&:hover {
cursor: pointer;
opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
}
}
}
}
}
.actions {
display: flex;
flex-direction: row;
gap: .5em;
button {
padding: 0;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
font-weight: bold;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
&:disabled {
background-color: #5f6aa6;
cursor: not-allowed;
}
}
} }
}
} }
.preview { .preview {
display: flex;
flex-direction: column;
max-height: 80vh;
overflow-y: auto;
.preview-loading {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; max-height: 80vh;
} overflow-y: auto;
.illustration { .preview-loading {
flex: 1; display: flex;
height: 12em; flex-direction: column;
object-fit: cover; align-items: center;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 15em;
} }
@media screen and (min-width: 600px) { .illustration {
height: 20em; flex: 1;
height: 12em;
object-fit: cover;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 15em;
}
@media screen and (min-width: 600px) {
height: 20em;
}
@media screen and (min-width: 750px) {
height: 25em;
}
} }
@media screen and (min-width: 750px) { header {
height: 25em; padding: 2em;
} }
}
header { main {
padding: 2em; padding: 2em;
} text-align: justify;
}
main { }
padding: 2em;
text-align: justify;
}
}

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

@@ -1,135 +1,150 @@
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',
templateUrl: './publication-edition.component.html', standalone: true,
styleUrl: './publication-edition.component.scss', templateUrl: './publication-edition.component.html',
imports: [ styleUrl: './publication-edition.component.scss',
CommonModule, imports: [
MatDialogModule, CommonModule,
MatIconModule, MatDialogModule,
MatInputModule, MatIconModule,
MatRippleModule, MatInputModule,
MatProgressSpinnerModule, MatRippleModule,
MatSelectModule, MatProgressSpinnerModule,
MatTabsModule, MatSelectModule,
MatTooltipModule, MatTabsModule,
ReactiveFormsModule, MatTooltipModule,
SubmitButtonComponent PictureSelectionDialog,
], ReactiveFormsModule,
providers: [PublicationEditionService] SubmitButtonComponent
],
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; get publicationEditionForm(): FormGroup {
isPreviewing = this.#publicationEditionService.isPreviewing; return this.publicationEditionService.publicationEditionForm;
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 {
return this.#publicationEditionService.publicationEditionForm;
}
get categories$(): Observable<Category[]> {
return this.#categoryService.categories$
.pipe(
map(categories =>
categories.filter(category => category.subCategories.length == 0)
.sort(this.byNameAscComparator())
)
);
}
private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
}
private compareStrings(stringA: string, stringB: string): number {
if (stringA < stringB) {
return -1;
} }
if (stringA > stringB) {
return 1; get isLoading$(): Observable<boolean> {
return this.publicationEditionService.isLoading$;
} }
return 0;
}
goPreviousLocation(): void { get isPreviewing$(): Observable<boolean> {
this.#location.back(); return this.publicationEditionService.isPreviewing$;
}
insertTitle(titleNumber: number): void {
this.#publicationEditionService.insertTitle(titleNumber);
}
selectAPicture(): void {
this.#publicationEditionService.selectAPicture();
}
insertLink(): void {
this.#publicationEditionService.insertLink();
}
displayCodeBlockDialog(): void {
this.#publicationEditionService.displayCodeBlockDialog();
}
displayPictureSectionDialog(): void {
this.#publicationEditionService.displayPictureSectionDialog();
}
updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
if (event.target) {
const textarea = event.target as HTMLTextAreaElement;
const positionStart = textarea.selectionStart;
const positionEnd = textarea.selectionEnd;
this.#publicationEditionService.editCursorPosition(positionStart, positionEnd);
} }
}
save(): void { get categories$(): Observable<Category[]> {
this.publicationSave.emit(this.#publicationEditionService.editedPublication); return this.categoryService.categories$
} .pipe(
map(categories =>
onTabChange(tabSelectedIndex: number): void { categories.filter(category => category.subCategories.length == 0)
if (tabSelectedIndex === 1) { .sort(this.byNameAscComparator())
this.#publicationEditionService.loadPreview(); )
);
} }
}
} private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
}
private compareStrings(stringA: string, stringB: string): number {
if (stringA < stringB) {
return -1;
}
if (stringA > stringB) {
return 1;
}
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 {
this.location.back();
}
insertTitle(titleNumber: number): void {
this.publicationEditionService.insertTitle(titleNumber);
}
selectAPicture(): void {
this.publicationEditionService.selectAPicture();
}
insertLink(): void {
this.publicationEditionService.insertLink();
}
displayCodeBlockDialog(): void {
this.publicationEditionService.displayCodeBlockDialog();
}
displayPictureSectionDialog(): void {
this.publicationEditionService.displayPictureSectionDialog();
}
updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
if (event.target) {
const textarea = event.target as HTMLTextAreaElement;
const positionStart = textarea.selectionStart;
const positionEnd = textarea.selectionEnd;
this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
}
}
save(): void {
this.publicationSave.emit(this.publicationEditionService.editedPublication);
}
onTabChange(tabSelectedIndex: number): void {
if (tabSelectedIndex === 1) {
this.publicationEditionService.loadPreview();
}
}
}

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

@@ -1,287 +1,312 @@
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;
export class CursorPosition { export class CursorPosition {
start: number; start: number;
end: number; end: number;
selectedCharacters: number; selectedCharacters: number;
constructor(start: number, end: number) { constructor(start: number, end: number) {
this.start = start; this.start = start;
this.end = end; this.end = end;
this.selectedCharacters = end - start; this.selectedCharacters = end - start;
} }
} }
export interface PublicationEditionState { export interface PublicationEditionState {
publication: Publication; publication: Publication;
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 = {
publication: DEFAULT_PUBLICATION, publication: DEFAULT_PUBLICATION,
cursorPosition: DEFAULT_CURSOR_POSITION cursorPosition: DEFAULT_CURSOR_POSITION
}; };
@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]),
illustrationId: new FormControl<string | undefined>('', [Validators.required]), illustrationId: new FormControl<string | undefined>('', [Validators.required]),
categoryId: new FormControl<string | undefined>('', [Validators.required]) categoryId: new FormControl<string | undefined>('', [Validators.required])
});
ngOnDestroy(): void {
this.#subscriptions.forEach(subscription => subscription.unsubscribe());
}
#updateForm(): void {
const state = this.#state();
const publication = state.publication;
this.publicationEditionForm.controls['title'].setValue(publication.title);
this.publicationEditionForm.controls['description'].setValue(publication.description);
this.publicationEditionForm.controls['text'].setValue(publication.text);
this.publicationEditionForm.controls['illustrationId'].setValue(publication.illustrationId);
this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
}
get isLoading(): Signal<boolean> {
return this.#isLoading.asReadonly();
}
get isSaving(): Signal<boolean> {
return this.#isSaving.asReadonly();
}
get isPreviewing(): Signal<boolean> {
return this.#isPreviewing.asReadonly();
}
get state(): Signal<PublicationEditionState> {
return this.#state.asReadonly();
}
get editedPublication(): Publication {
return this.#state().publication;
}
loadPublication(): void {
this.#isLoading.set(true);
this.#activatedRoute.paramMap.subscribe(params => {
const publicationId = params.get('publicationId');
if (publicationId == undefined) {
this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
this.#location.back();
} else {
this.#publicationRestService.getById(publicationId)
.then(publication => {
const state = this.#state();
state.publication = publication;
this.#state.set(state);
})
.catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error)
})
.finally(() => this.#isLoading.set(false));
}
}); });
}
init(publication: Publication): void { ngOnDestroy(): void {
const state = this.#state(); this.subscriptions.forEach(subscription => subscription.unsubscribe());
state.publication = publication; }
this.#state.set(state);
this.#updateForm();
const formValueChangesSubscription = this.publicationEditionForm.valueChanges private get _state(): PublicationEditionState {
.pipe( return this.stateSubject.value;
debounceTime(200), }
distinctUntilChanged()
) private _save(state: PublicationEditionState): void {
.subscribe(formValue => { this.stateSubject.next(state);
const state = this.#state(); }
private _updateForm(): void {
const state = this._state;
const publication = state.publication; const publication = state.publication;
publication.title = formValue.title; this.publicationEditionForm.controls['title'].setValue(publication.title);
publication.description = formValue.description; this.publicationEditionForm.controls['description'].setValue(publication.description);
publication.categoryId = formValue.categoryId; this.publicationEditionForm.controls['text'].setValue(publication.text);
publication.text = formValue.text; this.publicationEditionForm.controls['illustrationId'].setValue(publication.illustrationId);
this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
this.#state.set(state);
});
this.#subscriptions.push(formValueChangesSubscription);
}
private editIllustrationId(pictureId: string): void {
const state = this.#state();
state.publication.illustrationId = pictureId
this.#state.set(state);
}
displayPictureSectionDialog(): void {
const dialogRef = this.#dialog.open(PictureSelectionDialog);
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => {
if (newPictureId) {
this.editIllustrationId(newPictureId);
}
});
this.#subscriptions.push(afterDialogCloseSubscription);
}
displayCodeBlockDialog(): void {
const dialogRef = this.#dialog.open(CodeBlockDialog, {width: '60em'});
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(codeBlockWithLanguage => {
if (codeBlockWithLanguage) {
this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
}
});
this.#subscriptions.push(afterDialogCloseSubscription);
}
editCursorPosition(positionStart: number, positionEnd: number): void {
const state = this.#state();
state.cursorPosition.start = positionStart;
state.cursorPosition.end = positionEnd;
this.#state.set(state);
}
insertTitle(titleNumber: number): void {
if (titleNumber >= 1 && titleNumber <= 3) {
const state = this.#state();
const publication = state.publication;
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
const textWithTags = `${publicationTextLeftPart}[h${titleNumber}]${publicationTextMiddlePart}[/h${titleNumber}]${publicationTextRightPart}`;
publication.text = textWithTags;
this.#state.set(state);
this.#updateForm();
} else {
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
} }
}
selectAPicture(): void { get isLoading$(): Observable<boolean> {
const dialogRef = this.#dialog.open(PictureSelectionDialog); return this.isLoadingSubject.asObservable();
}
const afterDialogCloseSubscription = dialogRef.afterClosed() get isSaving$(): Observable<boolean> {
.subscribe(newPictureId => { return this.isSavingSubject.asObservable();
if (newPictureId) { }
this.insertPicture(newPictureId);
get isPreviewing$(): Observable<boolean> {
return this.isPreviewingSubject.asObservable();
}
get state$(): Observable<PublicationEditionState> {
return this.stateSubject.asObservable();
}
get editedPublication(): Publication {
return this._state.publication;
}
loadPublication(): void {
this.isLoadingSubject.next(true);
this.activatedRoute.paramMap.subscribe(params => {
const publicationId = params.get('publicationId');
if (publicationId == undefined) {
this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
this.location.back();
} else {
this.publicationRestService.getById(publicationId)
.then(publication => {
const state = this._state;
state.publication = publication;
this.stateSubject.next(state);
})
.catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error)
})
.finally(() => this.isLoadingSubject.next(false));
}
});
}
init(publication: Publication): void {
const state = this._state;
state.publication = publication;
this.stateSubject.next(state);
this._updateForm();
const formValueChangesSubscription = this.publicationEditionForm.valueChanges
.pipe(
debounceTime(200),
distinctUntilChanged()
)
.subscribe(formValue => {
const state = this._state;
const publication = state.publication;
publication.title = formValue.title;
publication.description = formValue.description;
publication.categoryId = formValue.categoryId;
publication.text = formValue.text;
this._save(state);
})
this.subscriptions.push(formValueChangesSubscription);
}
private editIllustrationId(pictureId: string): void {
const state = this._state;
state.publication.illustrationId = pictureId
this._save(state);
}
displayPictureSectionDialog(): void {
const dialogRef = this.dialog.open(PictureSelectionDialog);
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => {
if (newPictureId) {
this.editIllustrationId(newPictureId);
}
});
this.subscriptions.push(afterDialogCloseSubscription);
}
displayCodeBlockDialog(): void {
const dialogRef = this.dialog.open(CodeBlockDialog, { width: '60em' });
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(codeBlockWithLanguage => {
if (codeBlockWithLanguage) {
this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
}
});
this.subscriptions.push(afterDialogCloseSubscription);
}
editCursorPosition(positionStart: number, positionEnd: number): void {
const state = this._state;
state.cursorPosition.start = positionStart;
state.cursorPosition.end = positionEnd;
this._save(state);
}
insertTitle(titleNumber: number): void {
if (titleNumber >= 1 && titleNumber <= 3) {
const state = this._state;
const publication = state.publication;
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
const textWithTags = `${publicationTextLeftPart}[h${titleNumber}]${publicationTextMiddlePart}[/h${titleNumber}]${publicationTextRightPart}`;
publication.text = textWithTags;
this._save(state);
this._updateForm();
} else {
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
} }
}); }
this.#subscriptions.push(afterDialogCloseSubscription);
}
insertPicture(pictureId: string): void { selectAPicture(): void {
const state = this.#state(); const dialogRef = this.dialog.open(PictureSelectionDialog);
const publication = state.publication; const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => {
if (newPictureId) {
this.insertPicture(newPictureId);
}
});
this.subscriptions.push(afterDialogCloseSubscription);
}
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start); insertPicture(pictureId: string): void {
const publicationTextRightPart = publication.text.substring(state.cursorPosition.start); const state = this._state;
const textWithTags = `${publicationTextLeftPart}[img src="/api/pictures/${pictureId}" /]${publicationTextRightPart}`;
publication.text = textWithTags; const publication = state.publication;
this.#state.set(state); const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
this.#updateForm(); const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
} const textWithTags = `${publicationTextLeftPart}[img src="/api/pictures/${pictureId}" /]${publicationTextRightPart}`;
insertLink(): void { publication.text = textWithTags;
const state = this.#state();
const publication = state.publication; this._save(state);
this._updateForm();
}
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start); insertLink(): void {
const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end); const state = this._state;
const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
const textWithTags = `${publicationTextLeftPart}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
publication.text = textWithTags; const publication = state.publication;
this.#state.set(state); const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
this.#updateForm(); const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
} const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
const textWithTags = `${publicationTextLeftPart}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
private insertCodeBlock(programmingLanguage: string, codeBlock: string): void { publication.text = textWithTags;
const state = this.#state();
const publication = state.publication; this._save(state);
this._updateForm();
}
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start); private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
const publicationTextRightPart = publication.text.substring(state.cursorPosition.start); const state = this._state;
const codeBlockInstruction = `\n[code lg="${programmingLanguage}"]\n${codeBlock}\n[/code]\n\n`;
const textWithTags = `${publicationTextLeftPart}${codeBlockInstruction}${publicationTextRightPart}`;
publication.text = textWithTags; const publication = state.publication;
this.#state.set(state); const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
this.#updateForm(); const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
} const codeBlockInstruction = `\n[code lg="${programmingLanguage}"]\n${codeBlock}\n[/code]\n\n`;
const textWithTags = `${publicationTextLeftPart}${codeBlockInstruction}${publicationTextRightPart}`;
loadPreview(): void { publication.text = textWithTags;
const state = this.#state();
this.#isPreviewing.set(true); this._save(state);
const request: PreviewContentRequest = { this._updateForm();
text: state.publication.text }
};
this.#publicationRestService.preview(request) loadPreview(): void {
.then(response => { const state = this._state;
state.publication.parsedText = response.text;
this.#state.set(state); this.isPreviewingSubject.next(true);
setTimeout(() => Prism.highlightAll(), 1000); const request: PreviewContentRequest = {
}) text: state.publication.text
.catch(error => { };
console.error(error); this.publicationRestService.preview(request)
}) .then(response => {
.finally(() => { state.publication.parsedText = response.text;
this.#isPreviewing.set(false); this._save(state);
}); setTimeout(() => Prism.highlightAll(), 1000);
} })
} .catch(error => {
console.error(error);
})
.finally(() => {
this.isPreviewingSubject.next(false);
});
}
}

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

@@ -1,16 +1,16 @@
@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>
</div> </div>
</a> </a>
} }

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

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

25
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',
templateUrl: './publication-list.component.html', standalone: true,
styleUrl: './publication-list.component.scss', templateUrl: './publication-list.component.html',
imports: [CommonModule, RouterModule, MatTooltipModule] styleUrl: './publication-list.component.scss',
imports: [CommonModule, RouterModule, MatTooltipModule]
}) })
export class PublicationListComponent { export class PublicationListComponent {
publications = input.required<Publication[]>(); @Input()
} publications$!: Observable<Publication[]>;
}

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

@@ -1,6 +1,6 @@
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/> <input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/>
<button type="submit" (click)="searchPublications()" matRipple> <button type="submit" (click)="searchPublications()" matRipple>
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
</form> </form>

68
frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss
View File

@@ -1,38 +1,38 @@
:host { :host {
$borderRadiusValue: 10em; $borderRadiusValue: 10em;
position: relative; position: relative;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
form { form {
display: flex; display: flex;
input { input {
flex: 1; flex: 1;
border-radius: $borderRadiusValue; border-radius: $borderRadiusValue;
background-color: white; background-color: white;
border: solid 1px #ddd; border: solid 1px #ddd;
padding: .2em 2.7em .2em 1em; padding: .2em 2.7em .2em 1em;
height: 2em; height: 2em;
width: 100%; width: 100%;
}
button {
position: absolute;
display: flex;
align-items: center;
border-radius: $borderRadiusValue;
background-color: white;
border: none;
top: 0;
right: 0;
color: #aaaaaa;
padding: .3em;
&:hover {
background-color: #eee;
cursor: pointer;
}
}
} }
}
button {
position: absolute;
display: flex;
align-items: center;
border-radius: $borderRadiusValue;
background-color: white;
border: none;
top: 0;
right: 0;
color: #aaaaaa;
padding: .3em;
&:hover {
background-color: #eee;
cursor: pointer;
}
}
}
}

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

@@ -1,36 +1,37 @@
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',
imports: [ standalone: true,
MatIconModule, imports: [
MatRippleModule, MatIconModule,
ReactiveFormsModule MatRippleModule,
], ReactiveFormsModule
providers: [] ],
providers: []
}) })
export class PublicationsSearchBarComponent { export class PublicationsSearchBarComponent {
private formBuilder = inject(FormBuilder); private formBuilder = inject(FormBuilder);
private router = inject(Router); private router = inject(Router);
formGroup = this.formBuilder.group({ formGroup = this.formBuilder.group({
criteria: new FormControl<string | undefined>('', [Validators.required]) criteria: new FormControl<string | undefined>('', [Validators.required])
}); });
searchPublications(): void { searchPublications(): void {
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']);
}
} }
} }
}

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

@@ -1,18 +1,18 @@
@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 class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
@for(subCategory of category.subCategories; track subCategory) {
<a [routerLink]="['/publications']"
[queryParams]="{'category-id': subCategory.id}"
(click)="categoryClicked.emit()"
class="sub-category">
{{subCategory.name}}
</a>
}
</div>
</div> </div>
<div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}"> }
@for (subCategory of category.subCategories; track subCategory) {
<a [routerLink]="['/publications']"
[queryParams]="{'category-id': subCategory.id}"
(click)="categoryClicked.emit()"
class="sub-category">
{{ subCategory.name }}
</a>
}
</div>
</div>
}

98
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.scss
View File

@@ -1,57 +1,57 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.category { .category {
transition: background-color .2s ease-in-out;
&:hover {
cursor: pointer;
background-color: #5c6bc0;
}
.category-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: .5em 1em;
mat-icon {
transition: transform .2s ease-in-out;
}
}
&.openned {
.category-header {
mat-icon {
transform: rotate(90deg);
}
}
.sub-category-container {
max-height: none;
}
}
.sub-category-container {
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 0;
transition: max-height .2s ease-in-out;
background-color: #303f9f;
.sub-category {
padding: .5em 1em .5em 2em;
text-decoration: none;
color: inherit;
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
&:hover { &:hover {
background-color: #5c6bc0; cursor: pointer;
background-color: #5c6bc0;
}
.category-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: .5em 1em;
mat-icon {
transition: transform .2s ease-in-out;
}
}
&.openned {
.category-header {
mat-icon {
transform: rotate(90deg);
}
}
.sub-category-container {
max-height: none;
}
}
.sub-category-container {
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 0;
transition: max-height .2s ease-in-out;
background-color: #303f9f;
.sub-category {
padding: .5em 1em .5em 2em;
text-decoration: none;
color: inherit;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
}
} }
}
} }
}
} }

23
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,
@@ -37,10 +38,10 @@ export class CategoriesMenuComponent implements OnInit {
} else { } else {
const categoriesDivs = document.getElementsByClassName('category-header'); const categoriesDivs = document.getElementsByClassName('category-header');
Array.from(categoriesDivs) Array.from(categoriesDivs)
.map(category => category as HTMLElement) .map(category => category as HTMLElement)
.forEach(categoryDiv => this.closeAccordion(categoryDiv)); .forEach(categoryDiv => this.closeAccordion(categoryDiv));
const categoryDiv = document.getElementById(`category-${category.id}`); const categoryDiv = document.getElementById(`category-${category.id}`);
if (categoryDiv) { if (categoryDiv) {
this.openAccordion(categoryDiv); this.openAccordion(categoryDiv);
} }
@@ -58,4 +59,4 @@ export class CategoriesMenuComponent implements OnInit {
const divContent = categoryDiv?.nextElementSibling as HTMLElement; const divContent = categoryDiv?.nextElementSibling as HTMLElement;
divContent.style.maxHeight = `${divContent.scrollHeight}px`; divContent.style.maxHeight = `${divContent.scrollHeight}px`;
} }
} }

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

@@ -1,19 +1,19 @@
<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"/>
Codiki Codiki
</a> </a>
<button type="button" <button type="button"
(click)="close()" (click)="close()"
class="cod-button icon" class="cod-button icon"
matTooltip="Close the menu" matTooltip="Close the menu"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</h1> </h1>
<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>

116
frontend/src/app/components/side-menu/side-menu.component.scss
View File

@@ -1,68 +1,68 @@
:host { :host {
.menu { .menu {
display: flex;
flex-direction: column;
background-color: #3f51b5;
color: white;
$categoriesMenuWidth: 20em;
position: fixed;
top: 0;
left: -$categoriesMenuWidth - 1em - 1;
bottom: 0;
transition: left .2s ease-in-out;
width: $categoriesMenuWidth;
z-index: 3;
padding: 1em 0;
&.displayed {
left: 0;
}
h1 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 1em;
a {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: start; background-color: #3f51b5;
align-items: center;
gap: .5em;
color: white; color: white;
text-decoration: none;
img { $categoriesMenuWidth: 20em;
$imageSize: 1.2em; position: fixed;
width: $imageSize; top: 0;
height: $imageSize; left: -$categoriesMenuWidth - 1em - 1;
bottom: 0;
transition: left .2s ease-in-out;
width: $categoriesMenuWidth;
z-index: 3;
padding: 1em 0;
&.displayed {
left: 0;
}
h1 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 1em;
a {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: .5em;
color: white;
text-decoration: none;
img {
$imageSize: 1.2em;
width: $imageSize;
height: $imageSize;
}
}
}
h2 {
padding: 0 1em;
} }
}
} }
h2 { .overlay {
padding: 0 1em; display: none;
} position: fixed;
} top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: .2;
z-index: 2;
.overlay { &.displayed {
display: none; display: block;
position: fixed; }
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: .2;
z-index: 2;
&.displayed {
display: block;
} }
}
} }

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

@@ -1,30 +1,31 @@
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: [
CategoriesMenuComponent, CategoriesMenuComponent,
MatIconModule, MatIconModule,
MatRippleModule, MatRippleModule,
MatTooltipModule, MatTooltipModule,
RouterModule RouterModule
] ]
}) })
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;
} }
} }

14
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;
@@ -53,7 +53,7 @@ export class SideMenuService {
get categories$(): Observable<DisplayableCategory[]> { get categories$(): Observable<DisplayableCategory[]> {
return this.categoriesSubject.asObservable(); return this.categoriesSubject.asObservable();
} }
get isLoading$(): Observable<boolean> { get isLoading$(): Observable<boolean> {
return this.isLoadingSubject.asObservable(); return this.isLoadingSubject.asObservable();
} }
@@ -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);

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

@@ -1,12 +1,12 @@
<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/>
</span> </span>
</button> </button>

62
frontend/src/app/components/submit-button/submit-button.component.scss
View File

@@ -1,43 +1,43 @@
button { button {
padding: .8em 1.2em; padding: .8em 1.2em;
border-radius: 10em; border-radius: 10em;
border: none; border: none;
background-color: #3f51b5; background-color: #3f51b5;
color: white; color: white;
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
position: relative; position: relative;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover { &:hover {
background-color: #f2f4ff; background-color: #5b6ed8;
cursor: pointer; cursor: pointer;
} }
}
&:disabled { &.secondary {
background-color: #6d7ac5; color: #3f51b5;
cursor: not-allowed; background-color: white;
}
mat-spinner { &:hover {
position: absolute; background-color: #f2f4ff;
top: calc(50% - 12px); cursor: pointer;
left: calc(50% - 12px); }
} }
&:disabled {
background-color: #6d7ac5;
cursor: not-allowed;
}
mat-spinner {
position: absolute;
top: calc(50% - 12px);
left: calc(50% - 12px);
}
} }
:host ::ng-deep .spinner circle { :host ::ng-deep .spinner circle {
stroke: white; stroke: white;
} }
:host ::ng-deep .spinner.secondary circle { :host ::ng-deep .spinner.secondary circle {
stroke: #3f51b5; stroke: #3f51b5;
} }

36
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',
templateUrl: 'submit-button.component.html', standalone: true,
styleUrl: 'submit-button.component.scss', templateUrl: 'submit-button.component.html',
imports: [ styleUrl: 'submit-button.component.scss',
MatRippleModule, imports: [
MatProgressSpinnerModule CommonModule,
] MatRippleModule,
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>();
} }

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

@@ -1,18 +1,18 @@
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);
const router = inject(Router); const router = inject(Router);
const snackBar = inject(MatSnackBar); const snackBar = inject(MatSnackBar);
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;
} }
} }

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

@@ -1,20 +1,20 @@
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);
const router = inject(Router); const router = inject(Router);
const snackBar = inject(MatSnackBar); const snackBar = inject(MatSnackBar);
await authenticationService.checkIsAuthenticated(); await authenticationService.checkIsAuthenticated();
if (authenticationService.isAuthenticated()) { if (authenticationService.isAuthenticated()) {
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;
} }
} }

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

@@ -1,77 +1,78 @@
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 {
private readonly authenticationService = inject(AuthenticationService); private readonly authenticationService = inject(AuthenticationService);
private readonly router = inject(Router); private readonly router = inject(Router);
private readonly userRestService = inject(UserRestService); private readonly userRestService = inject(UserRestService);
private readonly snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
private isRefreshingToken = false; private isRefreshingToken = false;
private refreshTokenSubject = new Subject<string | undefined>(); private refreshTokenSubject = new Subject<string | undefined>();
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let requestWithAuthentication = request;
const jwt = this.authenticationService.getToken();
if (jwt) {
requestWithAuthentication = this.addTokenInHeaders(request, jwt);
}
return next.handle(requestWithAuthentication)
.pipe(
catchError(error => {
if (error instanceof HttpErrorResponse && error.status === 401) {
return this.handleAunauthorizedError(request, next, error);
}
return throwError(() => error);
})
);
}
private handleAunauthorizedError(request: HttpRequest<any>, next: HttpHandler, initialError: any): Observable<HttpEvent<any>> {
if (!this.isRefreshingToken) {
this.isRefreshingToken = true;
this.refreshTokenSubject.next(undefined);
this.authenticationService.refreshToken()
.then(refreshTokenResponse => {
this.refreshTokenSubject.next(refreshTokenResponse.accessToken);
})
.catch(() => this.handleNoRefreshToken(initialError))
.finally(() => this.isRefreshingToken = false);
}
return this.refreshTokenSubject.pipe(
filter(token => !!token),
take(1),
switchMap(token => {
let requestWithAuthentication = request; let requestWithAuthentication = request;
if (token) {
requestWithAuthentication = this.addTokenInHeaders(request, token) const jwt = this.authenticationService.getToken();
if (jwt) {
requestWithAuthentication = this.addTokenInHeaders(request, jwt);
} }
return next.handle(requestWithAuthentication);
})
);
}
private addTokenInHeaders(request: HttpRequest<any>, token: string): HttpRequest<any> { return next.handle(requestWithAuthentication)
return request.clone({ .pipe(
headers: request.headers.set('Authorization', `Bearer ${token}`) catchError(error => {
}); if (error instanceof HttpErrorResponse && error.status === 401) {
} return this.handleAunauthorizedError(request, next, error);
}
private handleNoRefreshToken(initialError: any): Observable<HttpEvent<any>> { return throwError(() => error);
this.router.navigate(['/login']); })
this.refreshTokenSubject.next(undefined); );
this.authenticationService.unauthenticate(); }
this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, {duration: 5000});
return throwError(() => initialError); private handleAunauthorizedError(request: HttpRequest<any>, next: HttpHandler, initialError: any): Observable<HttpEvent<any>> {
} if (!this.isRefreshingToken) {
} this.isRefreshingToken = true;
this.refreshTokenSubject.next(undefined);
this.authenticationService.refreshToken()
.then(refreshTokenResponse => {
this.refreshTokenSubject.next(refreshTokenResponse.accessToken);
})
.catch(() => this.handleNoRefreshToken(initialError))
.finally(() => this.isRefreshingToken = false);
}
return this.refreshTokenSubject.pipe(
filter(token => !!token),
take(1),
switchMap(token => {
let requestWithAuthentication = request;
if (token) {
requestWithAuthentication = this.addTokenInHeaders(request, token)
}
return next.handle(requestWithAuthentication);
})
);
}
private addTokenInHeaders(request: HttpRequest<any>, token: string): HttpRequest<any> {
return request.clone({
headers: request.headers.set('Authorization', `Bearer ${token}`)
});
}
private handleNoRefreshToken(initialError: any): Observable<HttpEvent<any>> {
this.router.navigate(['/login']);
this.refreshTokenSubject.next(undefined);
this.authenticationService.unauthenticate();
this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, { duration: 5000 });
return throwError(() => initialError);
}
}

6
frontend/src/app/core/model/FormError.ts
View File

@@ -1,4 +1,4 @@
export interface FormError { export interface FormError {
fieldName: string; fieldName: string;
errorMessage: string; errorMessage: string;
} }

12
frontend/src/app/core/model/User.ts
View File

@@ -1,7 +1,7 @@
export interface User { export interface User {
id: string; id: string;
email: string; email: string;
pseudo: string; pseudo: string;
photoId?: string; photoId?: string;
roles: string[]; roles: string[];
} }

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/category/model/category.ts
View File

@@ -1,5 +1,5 @@
export interface Category { export interface Category {
id: string; id: string;
name: string; name: string;
subCategories: Category[]; subCategories: Category[];
} }

6
frontend/src/app/core/rest-services/picture/model/picture.ts
View File

@@ -1,4 +1,4 @@
export interface Picture { export interface Picture {
id: string, id: string,
publishedAt: Date publishedAt: Date
} }

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

@@ -1,21 +1,21 @@
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'
}) })
export class PictureRestService { export class PictureRestService {
private readonly httpClient = inject(HttpClient); private readonly httpClient = inject(HttpClient);
getAllOfCurrentUser(): Promise<Picture[]> { getAllOfCurrentUser(): Promise<Picture[]> {
return lastValueFrom(this.httpClient.get<Picture[]>('/api/pictures/current-user')); return lastValueFrom(this.httpClient.get<Picture[]>('/api/pictures/current-user'));
} }
uploadPicture(pictureFile: File): Promise<string> { uploadPicture(pictureFile: File): Promise<string> {
const formData = new FormData(); const formData = new FormData();
formData.append("file", pictureFile); formData.append("file", pictureFile);
return lastValueFrom(this.httpClient.post<string>('/api/pictures', formData)); return lastValueFrom(this.httpClient.post<string>('/api/pictures', formData));
} }
} }

8
frontend/src/app/core/rest-services/publications/model/author.ts
View File

@@ -1,5 +1,5 @@
export interface Author { export interface Author {
id: string; id: string;
name: string; name: string;
image: string; image: string;
} }

6
frontend/src/app/core/rest-services/publications/model/preview.ts
View File

@@ -1,7 +1,7 @@
export interface PreviewContentRequest { export interface PreviewContentRequest {
text: string; text: string;
} }
export interface PreviewContentResponse { export interface PreviewContentResponse {
text: string; text: string;
} }

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

@@ -1,31 +1,14 @@
import {Author} from "./author"; import { Author } from "./author";
export interface Publication { export interface Publication {
id: string; id: string;
key: string; key: string;
title: string; title: string;
text: string; text: string;
parsedText: string; parsedText: string;
description: string; description: string;
creationDate: Date; creationDate: Date;
illustrationId: string; illustrationId: string;
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/model/login.model.ts
View File

@@ -1,10 +1,10 @@
export interface LoginRequest { export interface LoginRequest {
email?: string; email?: string;
password?: string; password?: string;
} }
export interface LoginResponse { export interface LoginResponse {
tokenType: string, tokenType: string,
accessToken: string, accessToken: string,
refreshToken: string refreshToken: string
} }

4
frontend/src/app/core/rest-services/user/model/refresh-token.model.ts
View File

@@ -1,3 +1,3 @@
export interface RefreshTokenRequest { export interface RefreshTokenRequest {
refreshTokenValue: string; refreshTokenValue: string;
} }

8
frontend/src/app/core/rest-services/user/model/signin.model.ts
View File

@@ -1,5 +1,5 @@
export interface SigninRequest { export interface SigninRequest {
pseudo?: string; pseudo?: string;
email?: string; email?: string;
password?: string; password?: string;
} }

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

@@ -1,25 +1,25 @@
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'
}) })
export class UserRestService { export class UserRestService {
private httpClient = inject(HttpClient); private httpClient = inject(HttpClient);
login(request: LoginRequest): Promise<LoginResponse> { login(request: LoginRequest): Promise<LoginResponse> {
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/login', request)); return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/login', request));
} }
signin(request: SigninRequest): Promise<void> { signin(request: SigninRequest): Promise<void> {
return lastValueFrom(this.httpClient.post<void>('/api/users', request)); return lastValueFrom(this.httpClient.post<void>('/api/users', request));
} }
refreshToken(request: RefreshTokenRequest): Promise<LoginResponse> { refreshToken(request: RefreshTokenRequest): Promise<LoginResponse> {
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/refresh-token', request)); return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/refresh-token', request));
} }
} }

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

@@ -1,146 +1,146 @@
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';
interface UserDetails { interface UserDetails {
sub: string; sub: string;
exp: number; exp: number;
email: string; email: string;
pseudo: string; pseudo: string;
roles: string; roles: string;
} }
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class AuthenticationService { export class AuthenticationService {
private readonly AUTHENTICATION_CHECKING_PERIOD = 5 * 60 * 1000; private readonly AUTHENTICATION_CHECKING_PERIOD = 5 * 60 * 1000;
private isAuthenticatedSubject = new BehaviorSubject<boolean>(false); private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
private readonly userRestService = inject(UserRestService); private readonly userRestService = inject(UserRestService);
startAuthenticationCheckingProcess(): void { startAuthenticationCheckingProcess(): void {
this.checkIsAuthenticated(); this.checkIsAuthenticated();
interval(this.AUTHENTICATION_CHECKING_PERIOD) interval(this.AUTHENTICATION_CHECKING_PERIOD)
.subscribe(() => this.checkIsAuthenticated()); .subscribe(() => this.checkIsAuthenticated());
}
authenticate(token: string, refreshToken: string): void {
localStorage.setItem(JWT_PARAM, token);
localStorage.setItem(REFRESH_TOKEN_PARAM, refreshToken);
this.isAuthenticatedSubject.next(true);
}
unauthenticate(): void {
localStorage.removeItem(JWT_PARAM);
localStorage.removeItem(REFRESH_TOKEN_PARAM);
this.isAuthenticatedSubject.next(false);
}
isAuthenticated(): boolean {
return this.isAuthenticatedSubject.value;
}
getAuthenticatedUser(): User | undefined {
return this.extractUserFromLocalStorage();
}
getToken(): string | undefined {
return localStorage.getItem(JWT_PARAM) ?? undefined;
}
getRefreshToken(): string | undefined {
return localStorage.getItem(REFRESH_TOKEN_PARAM) ?? undefined;
}
isTokenExpired(): boolean {
let result = true;
const userDetails = this.extractUserDetails();
if (userDetails) {
const expirationDate = new Date(userDetails.exp * 1000);
const now = new Date();
result = expirationDate < now;
} }
return result; authenticate(token: string, refreshToken: string): void {
} localStorage.setItem(JWT_PARAM, token);
localStorage.setItem(REFRESH_TOKEN_PARAM, refreshToken);
refreshToken(): Promise<LoginResponse> {
const refreshToken = this.getRefreshToken();
if (refreshToken) {
const refreshTokenRequest: RefreshTokenRequest = {
refreshTokenValue: refreshToken
};
return this.userRestService.refreshToken(refreshTokenRequest)
.then(refreshTokenResponse => {
this.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
return refreshTokenResponse;
});
}
return Promise.reject('No any refresh token found.');
}
checkIsAuthenticated(): Promise<void> {
return new Promise((resolve, reject) => {
const isTokenExpired = this.isTokenExpired();
if (isTokenExpired) {
if (this.getRefreshToken()) {
this.refreshToken()
.then(() => resolve())
.catch(() => reject());
} else {
this.isAuthenticatedSubject.next(false);
}
} else {
this.isAuthenticatedSubject.next(true); this.isAuthenticatedSubject.next(true);
}
resolve();
});
}
private extractUserFromLocalStorage(): User | undefined {
let result: User | undefined;
const userDetails = this.extractUserDetails();
if (userDetails) {
const user = this.convertToUser(userDetails);
result = user;
} }
return result; unauthenticate(): void {
} localStorage.removeItem(JWT_PARAM);
localStorage.removeItem(REFRESH_TOKEN_PARAM);
private extractUserDetails(): UserDetails | undefined { this.isAuthenticatedSubject.next(false);
let result: UserDetails | undefined = undefined; }
const token = localStorage.getItem(JWT_PARAM); isAuthenticated(): boolean {
return this.isAuthenticatedSubject.value;
const tokenParts = token?.split('.');
if (tokenParts?.length === 3 && tokenParts[1].length) {
const decodedTokenPart = atob(tokenParts[1]);
const userDetails: UserDetails = JSON.parse(decodedTokenPart);
result = userDetails;
} }
return result; getAuthenticatedUser(): User | undefined {
} return this.extractUserFromLocalStorage();
}
private convertToUser(userDetails: UserDetails): User { getToken(): string | undefined {
return { return localStorage.getItem(JWT_PARAM) ?? undefined;
id: userDetails.sub, }
email: userDetails.email,
pseudo: userDetails.pseudo, getRefreshToken(): string | undefined {
roles: userDetails.roles.split(',') return localStorage.getItem(REFRESH_TOKEN_PARAM) ?? undefined;
}; }
}
} isTokenExpired(): boolean {
let result = true;
const userDetails = this.extractUserDetails();
if (userDetails) {
const expirationDate = new Date(userDetails.exp * 1000);
const now = new Date();
result = expirationDate < now;
}
return result;
}
refreshToken(): Promise<LoginResponse> {
const refreshToken = this.getRefreshToken();
if (refreshToken) {
const refreshTokenRequest: RefreshTokenRequest = {
refreshTokenValue: refreshToken
};
return this.userRestService.refreshToken(refreshTokenRequest)
.then(refreshTokenResponse => {
this.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
return refreshTokenResponse;
});
}
return Promise.reject('No any refresh token found.');
}
checkIsAuthenticated(): Promise<void> {
return new Promise((resolve, reject) => {
const isTokenExpired = this.isTokenExpired();
if (isTokenExpired) {
if (this.getRefreshToken()) {
this.refreshToken()
.then(() => resolve())
.catch(() => reject());
} else {
this.isAuthenticatedSubject.next(false);
}
} else {
this.isAuthenticatedSubject.next(true);
}
resolve();
});
}
private extractUserFromLocalStorage(): User | undefined {
let result: User | undefined;
const userDetails = this.extractUserDetails();
if (userDetails) {
const user = this.convertToUser(userDetails);
result = user;
}
return result;
}
private extractUserDetails(): UserDetails | undefined {
let result: UserDetails | undefined = undefined;
const token = localStorage.getItem(JWT_PARAM);
const tokenParts = token?.split('.');
if (tokenParts?.length === 3 && tokenParts[1].length) {
const decodedTokenPart = atob(tokenParts[1]);
const userDetails: UserDetails = JSON.parse(decodedTokenPart);
result = userDetails;
}
return result;
}
private convertToUser(userDetails: UserDetails): User {
return {
id: userDetails.sub,
email: userDetails.email,
pseudo: userDetails.pseudo,
roles: userDetails.roles.split(',')
};
}
}

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'

8
frontend/src/app/core/utils/ObjectUtils.ts
View File

@@ -1,5 +1,5 @@
export function copy<T>(object: T): T { export function copy<T>(object: T): T {
return JSON.parse( return JSON.parse(
JSON.stringify(object) JSON.stringify(object)
); );
} }

10
frontend/src/app/pages/disconnection/disconnection.component.scss
View File

@@ -1,6 +1,6 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }

9
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'

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

@@ -1,11 +1,11 @@
<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>
} }
} }

10
frontend/src/app/pages/home/home.component.scss
View File

@@ -1,6 +1,6 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }

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();
} }
} }

53
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));
} }
} }

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

@@ -1,23 +1,23 @@
<form [formGroup]="loginForm" (submit)="performLogin()" class="cod-form card" ngNativeValidate> <form [formGroup]="loginForm" (submit)="performLogin()" class="cod-form card" ngNativeValidate>
<h1 i18n>Login</h1> <h1 i18n>Login</h1>
<div class="form-field"> <div class="form-field">
<mat-icon>mail</mat-icon> <mat-icon>mail</mat-icon>
<label for="email" i18n> <label for="email" i18n>
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>
<label for="password" i18n> <label for="password" i18n>
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>
<a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a> <a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a>
</div> </div>
</form> </form>

12
frontend/src/app/pages/login/login.component.scss
View File

@@ -1,7 +1,7 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 1em; padding: 1em;
} }

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

@@ -1,21 +1,22 @@
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: [
MatIconModule, MatIconModule,
MatRippleModule, MatRippleModule,
ReactiveFormsModule, ReactiveFormsModule,
RouterModule, RouterModule,
SubmitButtonComponent SubmitButtonComponent
], ],
@@ -52,10 +53,10 @@ export class LoginComponent implements OnInit, OnDestroy {
this.subscriptions.push(passwordSubscription) this.subscriptions.push(passwordSubscription)
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 });
} }
} }

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

@@ -1,21 +1,21 @@
<h1 i18n>Your publications</h1> <h1 i18n>Your publications</h1>
<a [routerLink]="['/publications/new']" <a [routerLink]="['/publications/new']"
class="new-publication" class="new-publication"
matTooltip="Add a new publication" matTooltip="Add a new publication"
matTooltipPosition="left" matTooltipPosition="left"
matRipple matRipple
i18n-matTooltip> i18n-matTooltip>
+ +
</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>
} }
} }

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

@@ -1,29 +1,29 @@
$newPublicationButtonSize: 1.7em; $newPublicationButtonSize: 1.7em;
:host { :host {
display: flex;
flex-direction: column;
align-items: center;
.new-publication {
position: fixed;
border-radius: 10em;
background-color: #14A44D;
color: white;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; align-items: center;
bottom: $newPublicationButtonSize;
right: $newPublicationButtonSize;
width: $newPublicationButtonSize;
height: $newPublicationButtonSize;
text-decoration: none;
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;
font-size: 2.2em;
&:hover { .new-publication {
background-color: #0e7a3a; position: fixed;
border-radius: 10em;
background-color: #14A44D;
color: white;
display: flex;
justify-content: center;
align-items: center;
bottom: $newPublicationButtonSize;
right: $newPublicationButtonSize;
width: $newPublicationButtonSize;
height: $newPublicationButtonSize;
text-decoration: none;
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;
font-size: 2.2em;
&:hover {
background-color: #0e7a3a;
}
} }
} }
}

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

@@ -1,35 +1,46 @@
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',
templateUrl: './my-publications.component.html', standalone: true,
styleUrl: './my-publications.component.scss', templateUrl: './my-publications.component.html',
imports: [ styleUrl: './my-publications.component.scss',
CommonModule, imports: [
MatProgressSpinnerModule, CommonModule,
MatRippleModule, MatProgressSpinnerModule,
MatTooltipModule, MatRippleModule,
PublicationListComponent, MatTooltipModule,
RouterModule PublicationListComponent,
], RouterModule
providers: [MyPublicationsService] ],
providers: [MyPublicationsService]
}) })
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; }
ngOnInit(): void { get isLoading$(): Observable<boolean> {
this.myPublicationsService.loadAuthenticatedUserPublications(); return this.myPublicationsService.isLoading$;
} }
}
get isLoaded$(): Observable<boolean> {
return this.myPublicationsService.isLoaded$;
}
ngOnInit(): void {
this.myPublicationsService.loadAuthenticatedUserPublications();
}
}

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