From 319d845669cc6634cb3329b2f0d0b5fad61877c2 Mon Sep 17 00:00:00 2001
From: Marthym <marthym@gmail.com>
Date: Sun, 20 Oct 2024 16:20:10 +0200
Subject: [PATCH 1/4] feat(sandside): #215 add autoread user setting

---
 .../baywatch/security/api/model/UserSettings.java        | 3 ++-
 .../security/infra/mappers/UserSettingsMapper.java       | 9 ++++++---
 .../baywatch/security/infra/model/UserSettingsForm.java  | 3 ++-
 .../V2_1_202410201508__users_settings_autoread.sql       | 2 ++
 .../src/main/resources/graphql/security/_model.graphqls  | 2 ++
 5 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 sandside/src/main/resources/db/migration/V2_1_202410201508__users_settings_autoread.sql

diff --git a/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/api/model/UserSettings.java b/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/api/model/UserSettings.java
index ae743616..298f9e62 100644
--- a/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/api/model/UserSettings.java
+++ b/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/api/model/UserSettings.java
@@ -3,6 +3,7 @@
 import java.util.Locale;
 
 public record UserSettings(
-        Locale preferredLocale
+        Locale preferredLocale,
+        boolean autoread
 ) {
 }
diff --git a/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/infra/mappers/UserSettingsMapper.java b/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/infra/mappers/UserSettingsMapper.java
index 41770a90..46d1eaa9 100644
--- a/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/infra/mappers/UserSettingsMapper.java
+++ b/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/infra/mappers/UserSettingsMapper.java
@@ -14,13 +14,16 @@
 @Mapper(componentModel = "spring")
 public interface UserSettingsMapper {
     default Entity<UserSettings> getUserSettingsEntity(Record r) {
-        return Entity.identify(new UserSettings(Locale.forLanguageTag(r.get(USERS_SETTINGS.USSE_PREFERRED_LOCALE))))
-                .withId(r.get(USERS_SETTINGS.USSE_USER_ID));
+        return Entity.identify(new UserSettings(
+                Locale.forLanguageTag(r.get(USERS_SETTINGS.USSE_PREFERRED_LOCALE)),
+                r.get(USERS_SETTINGS.USSE_AUTOREAD))
+        ).withId(r.get(USERS_SETTINGS.USSE_USER_ID));
     }
 
     default UsersSettingsRecord getUserSettingsRecord(UserSettings settings) {
         return USERS_SETTINGS.newRecord()
-                .setUssePreferredLocale(settings.preferredLocale().toLanguageTag());
+                .setUssePreferredLocale(settings.preferredLocale().toLanguageTag())
+                .setUsseAutoread(settings.autoread());
     }
 
     UserSettings get(UserSettingsForm form);
diff --git a/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/infra/model/UserSettingsForm.java b/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/infra/model/UserSettingsForm.java
index 44a44afa..fc77f5f8 100644
--- a/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/infra/model/UserSettingsForm.java
+++ b/sandside/src/main/java/fr/ght1pc9kc/baywatch/security/infra/model/UserSettingsForm.java
@@ -3,6 +3,7 @@
 import java.util.Locale;
 
 public record UserSettingsForm(
-        Locale preferredLocale
+        Locale preferredLocale,
+        boolean autoread
 ) {
 }
diff --git a/sandside/src/main/resources/db/migration/V2_1_202410201508__users_settings_autoread.sql b/sandside/src/main/resources/db/migration/V2_1_202410201508__users_settings_autoread.sql
new file mode 100644
index 00000000..b9cc8164
--- /dev/null
+++ b/sandside/src/main/resources/db/migration/V2_1_202410201508__users_settings_autoread.sql
@@ -0,0 +1,2 @@
+alter table USERS_SETTINGS
+    add COLUMN USSE_AUTOREAD boolean not null default true;
diff --git a/sandside/src/main/resources/graphql/security/_model.graphqls b/sandside/src/main/resources/graphql/security/_model.graphqls
index fca5da8d..7b864eeb 100644
--- a/sandside/src/main/resources/graphql/security/_model.graphqls
+++ b/sandside/src/main/resources/graphql/security/_model.graphqls
@@ -13,10 +13,12 @@ type User {
 type UserSettings {
     _id: ID
     preferredLocale: String
+    autoread: Boolean
 }
 
 input UserSettingsForm {
     preferredLocale: String
+    autoread: Boolean
 }
 
 type Session {

From d6e0bb482d5d0c4ad0b051e60d05e194e30aabe9 Mon Sep 17 00:00:00 2001
From: Marthym <marthym@gmail.com>
Date: Sun, 20 Oct 2024 16:21:05 +0200
Subject: [PATCH 2/4] feat(seaside): #215 add autoread settings to user
 settings tab

close #215
---
 seaside/src/configuration/components/SettingsTab.vue | 7 ++++++-
 seaside/src/locales/config-settings_en-US.ts         | 3 +++
 seaside/src/locales/config-settings_fr-FR.ts         | 3 +++
 seaside/src/security/model/UserSettings.type.ts      | 1 +
 seaside/src/security/services/UserSettingsService.ts | 4 ++--
 5 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/seaside/src/configuration/components/SettingsTab.vue b/seaside/src/configuration/components/SettingsTab.vue
index fb28b383..41f25cc4 100644
--- a/seaside/src/configuration/components/SettingsTab.vue
+++ b/seaside/src/configuration/components/SettingsTab.vue
@@ -4,11 +4,16 @@
       <div class="label">
         <span class="label-text first-letter:capitalize">{{ t('config.settings.form.preferredLocale') }}</span>
       </div>
-      <select v-model="userSettings.preferredLocale" class="select select-bordered w-full max-w-xs">
+      <select v-model="userSettings.preferredLocale" class="select select-bordered w-full">
         <option disabled></option>
         <option value="en-US">English (en-US)</option>
         <option value="fr-FR">Français (fr-FR)</option>
       </select>
+      <label class="label cursor-pointer mt-4">
+        <span class="label-text capitalize">{{ t('config.settings.form.autoread.label') }}</span>
+        <input :checked="userSettings.autoread" class="toggle" type="checkbox"/>
+      </label>
+      <div class="label label-text-alt pt-0">{{ t('config.settings.form.autoread.alt') }}</div>
       <button class="btn btn-primary capitalize mt-5" @click.stop="onClickSaveSettings()">
         {{ t('config.settings.form.action.save') }}
       </button>
diff --git a/seaside/src/locales/config-settings_en-US.ts b/seaside/src/locales/config-settings_en-US.ts
index c207bc07..4905f5ca 100644
--- a/seaside/src/locales/config-settings_en-US.ts
+++ b/seaside/src/locales/config-settings_en-US.ts
@@ -3,6 +3,9 @@ import { en_US as config_en_US } from '@/locales/config_en-US';
 export const en_US = {
     ...config_en_US,
     'config.settings.form.preferredLocale': 'Choose your preferred language',
+    'config.settings.form.autoread.label': 'news auto read',
+    'config.settings.form.autoread.alt': 'In the article list, ' +
+        'autoread marks articles as read as soon as you move on to the next one.',
     'config.settings.form.action.save': 'Save',
     'config.settings.messages.settingsUpdateSuccessfully': 'Settings updated successfully',
     'config.settings.messages.unableToUpdate': 'Unable to update settings',
diff --git a/seaside/src/locales/config-settings_fr-FR.ts b/seaside/src/locales/config-settings_fr-FR.ts
index f2e9ef1a..0ef2889f 100644
--- a/seaside/src/locales/config-settings_fr-FR.ts
+++ b/seaside/src/locales/config-settings_fr-FR.ts
@@ -3,6 +3,9 @@ import { fr_FR as config_fr_FR } from '@/locales/config_fr-FR';
 export const fr_FR = {
     ...config_fr_FR,
     'config.settings.form.preferredLocale': 'choisissez votre langue préférée :',
+    'config.settings.form.autoread.label': 'lecture automatique des articles',
+    'config.settings.form.autoread.alt': 'Dans la liste des articles, ' +
+        'l’autoread marque les articles comme lu dés que vous passez au suivant.',
     'config.settings.form.action.save': 'enregistrer',
     'config.settings.messages.settingsUpdateSuccessfully': 'Paramètres enregistrés avec succès.',
     'config.settings.messages.unableToUpdate': 'Erreur lors de l’enregistrement des paramètres !',
diff --git a/seaside/src/security/model/UserSettings.type.ts b/seaside/src/security/model/UserSettings.type.ts
index 36c4a7de..f6e5e7b6 100644
--- a/seaside/src/security/model/UserSettings.type.ts
+++ b/seaside/src/security/model/UserSettings.type.ts
@@ -2,4 +2,5 @@ import { Locale } from '@/common/model/Locale.type';
 
 export type UserSettings = {
     preferredLocale: Locale,
+    autoread: boolean,
 }
\ No newline at end of file
diff --git a/seaside/src/security/services/UserSettingsService.ts b/seaside/src/security/services/UserSettingsService.ts
index 1502d5f8..80ceb44d 100644
--- a/seaside/src/security/services/UserSettingsService.ts
+++ b/seaside/src/security/services/UserSettingsService.ts
@@ -6,7 +6,7 @@ import { UserSettings } from '@/security/model/UserSettings.type';
 const USERS_SETTINGS_GET_REQUEST = `#graphql
 query UserSettingsGet($id: ID){
     userSettingsGet(userId: $id) {
-        preferredLocale
+        preferredLocale autoread
     }
 }`;
 
@@ -20,7 +20,7 @@ export function userSettingsGet(userId: string): Observable<UserSettings> {
 const USERS_SETTINGS_UPDATE_REQUEST = `#graphql
 mutation UserSettingsUpdate($id: ID, $settings: UserSettingsForm){
     userSettingsUpdate(userId: $id, settings: $settings) {
-        preferredLocale
+        preferredLocale autoread
     }
 }`;
 

From 77ef5c51b782c9fa7c4bcb7858102bc4f040356a Mon Sep 17 00:00:00 2001
From: Marthym <marthym@gmail.com>
Date: Sun, 20 Oct 2024 17:07:57 +0200
Subject: [PATCH 3/4] feat(seaside): #215 use autoread user settings in news
 list component

---
 .../configuration/components/SettingsTab.vue  |   6 +-
 seaside/src/security/router/index.ts          |   2 +
 .../services/AuthenticationService.ts         |   2 +-
 seaside/src/security/store/UserConstants.ts   |   2 +
 seaside/src/security/store/user.ts            |   7 +
 .../components/newslist/NewsList.vue          | 184 +++++++++---------
 6 files changed, 112 insertions(+), 91 deletions(-)

diff --git a/seaside/src/configuration/components/SettingsTab.vue b/seaside/src/configuration/components/SettingsTab.vue
index 41f25cc4..5489a4d7 100644
--- a/seaside/src/configuration/components/SettingsTab.vue
+++ b/seaside/src/configuration/components/SettingsTab.vue
@@ -11,7 +11,7 @@
       </select>
       <label class="label cursor-pointer mt-4">
         <span class="label-text capitalize">{{ t('config.settings.form.autoread.label') }}</span>
-        <input :checked="userSettings.autoread" class="toggle" type="checkbox"/>
+        <input v-model="userSettings.autoread" class="toggle" type="checkbox"/>
       </label>
       <div class="label label-text-alt pt-0">{{ t('config.settings.form.autoread.alt') }}</div>
       <button class="btn btn-primary capitalize mt-5" @click.stop="onClickSaveSettings()">
@@ -28,6 +28,8 @@ import { userSettingsGet, userSettingsUpdate } from '@/security/services/UserSet
 import { useStore } from 'vuex';
 import notificationService from '@/services/notification/NotificationService';
 import { from, switchMap } from 'rxjs';
+import { store } from '@/store';
+import { UPDATE_SETTINGS_MUTATION as USER_UPDATE_SETTINGS_MUTATION } from '@/security/store/UserConstants';
 
 @Component({
   setup() {
@@ -43,6 +45,7 @@ export default class SettingsTab extends Vue {
   private mergeLocaleMessage;
   private userSettings: UserSettings = {
     preferredLocale: this.locale,
+    autoread: true,
   } as UserSettings;
 
   private mounted(): void {
@@ -66,6 +69,7 @@ export default class SettingsTab extends Vue {
           this.mergeLocaleMessage(this.userSettings.preferredLocale, messages[this.userSettings.preferredLocale.replace('-', '_')]);
           this.locale = this.userSettings.preferredLocale;
           notificationService.pushSimpleOk(this.t('config.settings.messages.settingsUpdateSuccessfully'));
+          store.commit(USER_UPDATE_SETTINGS_MUTATION, this.userSettings);
         },
         error: err => notificationService.pushSimpleError(this.t('config.settings.messages.unableToUpdate')),
       });
diff --git a/seaside/src/security/router/index.ts b/seaside/src/security/router/index.ts
index fd78aea3..8734d56a 100644
--- a/seaside/src/security/router/index.ts
+++ b/seaside/src/security/router/index.ts
@@ -7,6 +7,7 @@ import { refresh } from '@/security/services/AuthenticationService';
 import {
     LOGOUT_MUTATION as USER_LOGOUT_MUTATION,
     UPDATE_MUTATION as USER_UPDATE_MUTATION,
+    UPDATE_SETTINGS_MUTATION as USER_UPDATE_SETTINGS_MUTATION,
 } from '@/security/store/UserConstants';
 
 const LoginPage = () => import('@/security/pages/LoginPage.vue');
@@ -24,6 +25,7 @@ export const requireAuthNavGuard: NavigationGuardWithThis<NavigationGuardWithThi
                 i18n.global.locale.value = session.settings.preferredLocale;
             }
             store.commit(USER_UPDATE_MUTATION, session.user);
+            store.commit(USER_UPDATE_SETTINGS_MUTATION, session.settings);
         } catch (err) {
             store.commit(USER_LOGOUT_MUTATION);
         }
diff --git a/seaside/src/security/services/AuthenticationService.ts b/seaside/src/security/services/AuthenticationService.ts
index 5e5979ad..4cfef616 100644
--- a/seaside/src/security/services/AuthenticationService.ts
+++ b/seaside/src/security/services/AuthenticationService.ts
@@ -34,7 +34,7 @@ const SESSION_REFRESH_REQUEST = `#graphql
 mutation {
     refreshSession {
         user { _id login mail name roles }
-        settings { preferredLocale }
+        settings { preferredLocale autoread }
         maxAge
     }
 }`;
diff --git a/seaside/src/security/store/UserConstants.ts b/seaside/src/security/store/UserConstants.ts
index af360fdb..51ada7f1 100644
--- a/seaside/src/security/store/UserConstants.ts
+++ b/seaside/src/security/store/UserConstants.ts
@@ -1,6 +1,7 @@
 export const NAMESPACE = 'user';
 export const LOGOUT = 'logout';
 export const UPDATE = 'update';
+export const UPDATE_SETTINGS = 'updateSettings';
 export const OPEN_CREATE_ACCOUNT = 'openCreateAccount';
 export const CLOSE_CREATE_ACCOUNT = 'closeCreateAccount';
 export const ADD_ROLE = 'addRole';
@@ -9,6 +10,7 @@ export const HAS_ROLE_MANAGER = 'hasRoleManager';
 export const HAS_ROLE_ADMIN = 'hasRoleAdmin';
 export const LOGOUT_MUTATION = `${NAMESPACE}/${LOGOUT}`;
 export const UPDATE_MUTATION = `${NAMESPACE}/${UPDATE}`;
+export const UPDATE_SETTINGS_MUTATION = `${NAMESPACE}/${UPDATE_SETTINGS}`;
 export const OPEN_CREATE_ACCOUNT_MUTATION = `${NAMESPACE}/${OPEN_CREATE_ACCOUNT}`;
 export const CLOSE_CREATE_ACCOUNT_MUTATION = `${NAMESPACE}/${CLOSE_CREATE_ACCOUNT}`;
 export const USER_ADD_ROLE_MUTATION = `${NAMESPACE}/${ADD_ROLE}`;
diff --git a/seaside/src/security/store/user.ts b/seaside/src/security/store/user.ts
index 2b04a7f8..753f2595 100644
--- a/seaside/src/security/store/user.ts
+++ b/seaside/src/security/store/user.ts
@@ -9,19 +9,23 @@ import {
     LOGOUT,
     OPEN_CREATE_ACCOUNT,
     UPDATE,
+    UPDATE_SETTINGS,
 } from '@/security/store/UserConstants';
 import { GetterTree } from 'vuex';
+import { UserSettings } from '@/security/model/UserSettings.type';
 
 export type UserState = {
     user: User;
     isAuthenticated: boolean | undefined;
     isCreateAccountOpen: boolean;
+    autoread: boolean;
 }
 
 const state = (): UserState => ({
     user: ANONYMOUS,
     isAuthenticated: undefined,
     isCreateAccountOpen: false,
+    autoread: true,
 });
 
 // getters
@@ -59,6 +63,9 @@ const mutations = {
         st.user = payload;
         st.isAuthenticated = hasRole(st.user, UserRole.USER);
     },
+    [UPDATE_SETTINGS](st: UserState, payload: UserSettings): void {
+        st.autoread = payload.autoread;
+    },
 };
 
 const hasRole = (user: User, expectedRole: UserRole, entity?: string): boolean => {
diff --git a/seaside/src/techwatch/components/newslist/NewsList.vue b/seaside/src/techwatch/components/newslist/NewsList.vue
index f87a4642..13855ddc 100644
--- a/seaside/src/techwatch/components/newslist/NewsList.vue
+++ b/seaside/src/techwatch/components/newslist/NewsList.vue
@@ -1,35 +1,35 @@
 <template>
-  <div class="max-w-5xl focus:outline-none" ref="newsList">
+  <div ref="newsList" class="max-w-5xl focus:outline-none">
     <template v-for="(card, idx) in news" :key="card.data.id">
       <NewsCard :ref="card.data.id" :card="card"
                 @activate="activateNewsCard(idx)" @addFilter="onAddFilter" @clickTitle="markNewsRead(idx, true)">
-        <template #actions v-if="userStore.isAuthenticated">
+        <template v-if="userStore.isAuthenticated" #actions>
           <div class="join -ml-2 lg:ml-0">
-            <button v-if="card.data.state.read" @click.stop="toggleRead(idx)"
+            <button v-if="card.data.state.read" :title="t('home.news.unread.tooltip')"
                     class="btn btn-xs btn-ghost join-item"
-                    :title="t('home.news.unread.tooltip')">
+                    @click.stop="toggleRead(idx)">
               <EnvelopeOpenIcon class="h-5 w-5 cursor-pointer stroke-2"/>
               <span class="hidden lg:block">{{ t('home.news.unread') }}</span>
             </button>
-            <button v-else @click.stop="toggleRead(idx)"
+            <button v-else :title="t('home.news.read.tooltip')"
                     class="btn btn-xs btn-ghost join-item"
-                    :title="t('home.news.read.tooltip')">
+                    @click.stop="toggleRead(idx)">
               <EnvelopeIcon class="h-5 w-5 cursor-pointer stroke-2"/>
               <span class="hidden lg:block">{{ t('home.news.read') }}</span>
             </button>
-            <button @click.stop="toggleNewsKeep(idx)" class="btn btn-xs btn-ghost join-item"
-                    :class="{'text-accent': card.data.state.keep}"
-                    :title="t('home.news.clip.tooltip')">
+            <button :class="{'text-accent': card.data.state.keep}" :title="t('home.news.clip.tooltip')"
+                    class="btn btn-xs btn-ghost join-item"
+                    @click.stop="toggleNewsKeep(idx)">
               <PaperClipIcon class="h-5 w-5 cursor-pointer stroke-2"/>
               <span class="hidden lg:block">{{ t('home.news.clip') }}</span>
             </button>
-            <button @click.stop="toggleNewsShared(idx)" class="btn btn-xs btn-ghost join-item"
-                    :class="{'text-accent': card.data.state.shared}">
+            <button :class="{'text-accent': card.data.state.shared}" class="btn btn-xs btn-ghost join-item"
+                    @click.stop="toggleNewsShared(idx)">
               <ShareIcon class="h-5 w-5 cursor-pointer stroke-2"/>
               <span class="hidden lg:block">{{ t('home.news.share') }}</span>
             </button>
             <button class="btn btn-xs btn-ghost join-item" disabled="disabled">
-              <FireIcon class="w-6 h-6" :class="{'text-warning': card.data.popularity?.score > 0}"/>
+              <FireIcon :class="{'text-warning': card.data.popularity?.score > 0}" class="w-6 h-6"/>
               <span v-if="card.data.popularity?.score > 0"
                     class="hidden lg:block text-warning">{{ card.data.popularity.score }}</span>
             </button>
@@ -160,61 +160,6 @@ export default class NewsList extends Vue implements ScrollActivable, InfiniteSc
     });
   }
 
-  private observeFirst(el: Element): void {
-    if (this.isAuthenticated) {
-      this.activateOnScroll.observe(el);
-      if (this.news.length >= 19) {
-        this.infiniteScroll.observe(this.getRefElement(this.news[this.news.length - 3].data.id));
-      }
-    }
-  }
-
-  private buildNewsQueryString(): NewsSearchRequest {
-    const query: NewsSearchRequest = {};
-    if (!this.isAuthenticated) {
-      return query;
-    }
-
-    if (this.newsStore.unread) {
-      query.read = false;
-    }
-    if (this.newsStore.popular) {
-      query.popular = true;
-    }
-    if (this.newsStore.keep) {
-      query.keep = true;
-    }
-    if (this.newsStore.tags.length > 0) {
-      query.tags = [];
-      this.newsStore.tags.forEach(tag => query.tags?.push(`∋${tag}`));
-    }
-    if (this.newsStore.feed) {
-      query.feeds = [this.newsStore.feed.id];
-    }
-
-    const lastIndex = this.news.length - 1;
-    if (this.news.length <= 0) {
-      return query;
-    }
-
-    let toSkip = 0;
-    const lastNewsView = this.news[lastIndex];
-    // Find unread news at the same date to add offset in query, avoid duplicate
-    for (let i = this.news.length - 1; i >= 0; i--) {
-      if (!this.news[i].data.state.read && this.news[i].data.publication === lastNewsView.data.publication) {
-        toSkip++;
-      } else {
-        break;
-      }
-    }
-    query.publication = `≤${lastNewsView.data.publication}`;
-    if (toSkip > 0) {
-      query._from = toSkip;
-    }
-
-    return query;
-  }
-
   loadNextPage(): Observable<Element> {
     const query = this.buildNewsQueryString();
 
@@ -262,7 +207,7 @@ export default class NewsList extends Vue implements ScrollActivable, InfiniteSc
     if (this.activeNews >= 0 && this.activeNews < this.news.length) {
       // Manage previous news
       this.news[this.activeNews].isActive = false;
-      if (!this.news[this.activeNews].keepMark) {
+      if (!this.news[this.activeNews].keepMark && this.userStore.autoread) {
         this.markNewsRead(this.activeNews, true);
       }
     }
@@ -283,6 +228,80 @@ export default class NewsList extends Vue implements ScrollActivable, InfiniteSc
     this.news[idx].keepMark = true;
   }
 
+  getRefElement(ref: string): Element {
+    const vueRef: Vue[] | undefined = this.$refs[ref] as Vue[] | undefined;
+    if (vueRef === undefined) {
+      throw new Error(`Element with ref ${ref} not found !`);
+    }
+    return (vueRef)[0].$el;
+  }
+
+  beforeUnmount(): void {
+    this.keyboardController.purge();
+
+  }
+
+  unmounted(): void {
+    this.activateOnScroll.disconnect();
+    this.infiniteScroll.disconnect();
+    actionServiceUnregisterFunction();
+  }
+
+  private observeFirst(el: Element): void {
+    if (this.isAuthenticated) {
+      this.activateOnScroll.observe(el);
+      if (this.news.length >= 19) {
+        this.infiniteScroll.observe(this.getRefElement(this.news[this.news.length - 3].data.id));
+      }
+    }
+  }
+
+  private buildNewsQueryString(): NewsSearchRequest {
+    const query: NewsSearchRequest = {};
+    if (!this.isAuthenticated) {
+      return query;
+    }
+
+    if (this.newsStore.unread) {
+      query.read = false;
+    }
+    if (this.newsStore.popular) {
+      query.popular = true;
+    }
+    if (this.newsStore.keep) {
+      query.keep = true;
+    }
+    if (this.newsStore.tags.length > 0) {
+      query.tags = [];
+      this.newsStore.tags.forEach(tag => query.tags?.push(`∋${tag}`));
+    }
+    if (this.newsStore.feed) {
+      query.feeds = [this.newsStore.feed.id];
+    }
+
+    const lastIndex = this.news.length - 1;
+    if (this.news.length <= 0) {
+      return query;
+    }
+
+    let toSkip = 0;
+    const lastNewsView = this.news[lastIndex];
+    // Find unread news at the same date to add offset in query, avoid duplicate
+    for (let i = this.news.length - 1; i >= 0; i--) {
+      if (!this.news[i].data.state.read && this.news[i].data.publication === lastNewsView.data.publication) {
+        toSkip++;
+      } else {
+        break;
+      }
+    }
+    query.publication = `≤${lastNewsView.data.publication}`;
+    if (toSkip > 0) {
+      query._from = toSkip;
+    }
+
+    return query;
+  }
+
   private markNewsRead(idx: number, mark: boolean) {
     if (!this.isAuthenticated) {
       return;
@@ -297,9 +316,15 @@ export default class NewsList extends Vue implements ScrollActivable, InfiniteSc
 
     iif(() => mark,
         newsMark(target.data.id, Mark.READ).pipe(
-            tap(() => this.store.commit(DECREMENT_UNREAD_MUTATION))),
+            tap(() => {
+              this.news[idx].data.state.read = true;
+              this.store.commit(DECREMENT_UNREAD_MUTATION);
+            })),
         newsUnMark(target.data.id, Mark.READ).pipe(
-            tap(() => this.store.commit(INCREMENT_UNREAD_MUTATION))),
+            tap(() => {
+              this.news[idx].data.state.read = false;
+              this.store.commit(INCREMENT_UNREAD_MUTATION);
+            })),
     ).subscribe(state => {
       this.news[idx].data.state.read = state.read;
     });
@@ -371,29 +396,10 @@ export default class NewsList extends Vue implements ScrollActivable, InfiniteSc
     });
   }
 
-  getRefElement(ref: string): Element {
-    const vueRef: Vue[] | undefined = this.$refs[ref] as Vue[] | undefined;
-    if (vueRef === undefined) {
-      throw new Error(`Element with ref ${ref} not found !`);
-    }
-    return (vueRef)[0].$el;
-  }
-
   private onAddFilter(event: { type: string, entity: Feed }): void {
     this.store.commit(NEWS_FILTER_FEED_MUTATION, { id: event.entity._id, label: event.entity.name });
     actionServiceReload('news');
   }
 
-  beforeUnmount(): void {
-    this.keyboardController.purge();
-
-  }
-
-  unmounted(): void {
-    this.activateOnScroll.disconnect();
-    this.infiniteScroll.disconnect();
-    actionServiceUnregisterFunction();
-  }
-
 }
 </script>

From 52274583c8429314ad0745222b03f7eca39061ad Mon Sep 17 00:00:00 2001
From: Marthym <marthym@gmail.com>
Date: Tue, 22 Oct 2024 23:13:44 +0200
Subject: [PATCH 4/4] test(sandside): #215 update unit tests for autoread

---
 .../security/domain/UserSettingsServiceImplTest.java     | 8 ++++----
 .../infra/persistence/UserSettingsRepositoryTest.java    | 4 ++--
 .../tests/samples/infra/UsersSettingsRecordSamples.java  | 9 ++++++---
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/sandside/src/test/java/fr/ght1pc9kc/baywatch/security/domain/UserSettingsServiceImplTest.java b/sandside/src/test/java/fr/ght1pc9kc/baywatch/security/domain/UserSettingsServiceImplTest.java
index 10e6c013..15bd2877 100644
--- a/sandside/src/test/java/fr/ght1pc9kc/baywatch/security/domain/UserSettingsServiceImplTest.java
+++ b/sandside/src/test/java/fr/ght1pc9kc/baywatch/security/domain/UserSettingsServiceImplTest.java
@@ -29,7 +29,7 @@ class UserSettingsServiceImplTest {
     @BeforeEach
     void setUp() {
         UserSettingsPersistencePort mockPersistence = mock(UserSettingsPersistencePort.class);
-        doReturn(Mono.just(Entity.identify(new UserSettings(Locale.FRENCH)).withId(UserSamples.LUKE.id())))
+        doReturn(Mono.just(Entity.identify(new UserSettings(Locale.FRENCH, true)).withId(UserSamples.LUKE.id())))
                 .when(mockPersistence).get(anyString());
 
         doAnswer(answer -> {
@@ -70,7 +70,7 @@ void should_fail_get_settings_on_unauthenticated() {
     void should_update_user_settings() {
         doReturn(Mono.just(UserSamples.LUKE)).when(mockAuthentication).getConnectedUser();
 
-        StepVerifier.create(tested.update(UserSamples.LUKE.id(), new UserSettings(Locale.FRENCH)))
+        StepVerifier.create(tested.update(UserSamples.LUKE.id(), new UserSettings(Locale.FRENCH, true)))
                 .assertNext(actual -> Assertions.assertThat(actual.id()).isEqualTo(UserSamples.LUKE.id()))
                 .verifyComplete();
     }
@@ -79,7 +79,7 @@ void should_update_user_settings() {
     void should_fail_update_settings_on_unauthorize() {
         doReturn(Mono.just(UserSamples.LUKE)).when(mockAuthentication).getConnectedUser();
 
-        StepVerifier.create(tested.update(UserSamples.OBIWAN.id(), new UserSettings(Locale.FRENCH)))
+        StepVerifier.create(tested.update(UserSamples.OBIWAN.id(), new UserSettings(Locale.FRENCH, true)))
                 .verifyError(UnauthorizedException.class);
     }
 
@@ -87,7 +87,7 @@ void should_fail_update_settings_on_unauthorize() {
     void should_fail_update_settings_on_unauthenticated() {
         doReturn(Mono.empty()).when(mockAuthentication).getConnectedUser();
 
-        StepVerifier.create(tested.update(UserSamples.OBIWAN.id(), new UserSettings(Locale.FRENCH)))
+        StepVerifier.create(tested.update(UserSamples.OBIWAN.id(), new UserSettings(Locale.FRENCH, true)))
                 .verifyError(UnauthenticatedUser.class);
     }
 }
\ No newline at end of file
diff --git a/sandside/src/test/java/fr/ght1pc9kc/baywatch/security/infra/persistence/UserSettingsRepositoryTest.java b/sandside/src/test/java/fr/ght1pc9kc/baywatch/security/infra/persistence/UserSettingsRepositoryTest.java
index be80e053..410ffbb1 100644
--- a/sandside/src/test/java/fr/ght1pc9kc/baywatch/security/infra/persistence/UserSettingsRepositoryTest.java
+++ b/sandside/src/test/java/fr/ght1pc9kc/baywatch/security/infra/persistence/UserSettingsRepositoryTest.java
@@ -64,7 +64,7 @@ void should_create_settings(DSLContext dsl) {
                     USERS_SETTINGS.USSE_USER_ID.eq(DSIDIOUS_SETTINGS.getUsseUserId()));
             Assertions.assertThat(count).isZero();
         }
-        StepVerifier.create(tested.persist(DSIDIOUS_SETTINGS.getUsseUserId(), new UserSettings(Locale.GERMANY)))
+        StepVerifier.create(tested.persist(DSIDIOUS_SETTINGS.getUsseUserId(), new UserSettings(Locale.GERMANY, true)))
                 .assertNext(actual -> Assertions.assertThat(actual.self().preferredLocale())
                         .isEqualTo(Locale.GERMANY))
                 .verifyComplete();
@@ -82,7 +82,7 @@ void should_update_settings(DSLContext dsl) {
                     USERS_SETTINGS.USSE_USER_ID.eq(OKENOBI_SETTINGS.getUsseUserId()));
             Assertions.assertThat(count).isOne();
         }
-        StepVerifier.create(tested.persist(OKENOBI_SETTINGS.getUsseUserId(), new UserSettings(Locale.GERMANY)))
+        StepVerifier.create(tested.persist(OKENOBI_SETTINGS.getUsseUserId(), new UserSettings(Locale.GERMANY, true)))
                 .assertNext(actual -> Assertions.assertThat(actual.self().preferredLocale())
                         .isEqualTo(Locale.GERMANY))
                 .verifyComplete();
diff --git a/sandside/src/test/java/fr/ght1pc9kc/baywatch/tests/samples/infra/UsersSettingsRecordSamples.java b/sandside/src/test/java/fr/ght1pc9kc/baywatch/tests/samples/infra/UsersSettingsRecordSamples.java
index e4ca6221..97bdb813 100644
--- a/sandside/src/test/java/fr/ght1pc9kc/baywatch/tests/samples/infra/UsersSettingsRecordSamples.java
+++ b/sandside/src/test/java/fr/ght1pc9kc/baywatch/tests/samples/infra/UsersSettingsRecordSamples.java
@@ -12,15 +12,18 @@ public class UsersSettingsRecordSamples implements RelationalDataSet<UsersSettin
 
     public static final UsersSettingsRecord OKENOBI_SETTINGS = UsersSettings.USERS_SETTINGS.newRecord()
             .setUsseUserId(UsersRecordSamples.OKENOBI.getUserId())
-            .setUssePreferredLocale(Locale.FRANCE.toLanguageTag());
+            .setUssePreferredLocale(Locale.FRANCE.toLanguageTag())
+            .setUsseAutoread(true);
 
     public static final UsersSettingsRecord LSKYWALKER_SETTINGS = UsersSettings.USERS_SETTINGS.newRecord()
             .setUsseUserId(UsersRecordSamples.LSKYWALKER.getUserId())
-            .setUssePreferredLocale(Locale.JAPAN.toLanguageTag());
+            .setUssePreferredLocale(Locale.JAPAN.toLanguageTag())
+            .setUsseAutoread(true);
 
     public static final UsersSettingsRecord DSIDIOUS_SETTINGS = UsersSettings.USERS_SETTINGS.newRecord()
             .setUsseUserId(UsersRecordSamples.DSIDIOUS.getUserId())
-            .setUssePreferredLocale(Locale.ENGLISH.toLanguageTag());
+            .setUssePreferredLocale(Locale.ENGLISH.toLanguageTag())
+            .setUsseAutoread(false);
 
     @Override
     public List<UsersSettingsRecord> records() {