fix for loading tags in reading-mode

diff --git a/frontend/src/lib/tagStore.js b/frontend/src/lib/tagStore.js
index 1e6cc57ea06f746896a2466cee9be292155cc310..7af1f9dd52d4bd49e8c42597d29924840eb3b0e7 100644 (file)
--- a/frontend/src/lib/tagStore.js
+++ b/frontend/src/lib/tagStore.js
@@ -1,3 +1,4 @@
 import {writable} from 'svelte/store';
 
-export let tags = writable([]);
\ No newline at end of file
+export let tags = writable([]);
+export let tagsLoaded = writable(false);
\ No newline at end of file

diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 540b6e892e0a56c11ddd7ced29bdb523fc8e96ce..48b08b60cc081efd956f0e4c7dfcbf2d0b76e1c3 100644 (file)
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -11,7 +11,7 @@
                darkMode
        } from '$lib/settingsStore.js';
        import { API_URL } from '$lib/APIurl.js';
-       import { tags } from '$lib/tagStore.js';
+       import { tags, tagsLoaded } from '$lib/tagStore.js';
        import TagModal from '$lib/TagModal.svelte';
        import {
                alwaysShowSidenav,
@@ -205,6 +205,7 @@
                getUserSettings();
                getTemplates();
                getVersionInfo();
+               loadTags();
 
                if (page.url.pathname === '/read') {
                        $readingMode = true;
@@ -217,6 +218,21 @@
                });
        });
 
+       function loadTags() {
+               axios
+                       .get(API_URL + '/logs/getTags')
+                       .then((response) => {
+                               $tags = response.data;
+                               $tagsLoaded = true;
+                       })
+                       .catch((error) => {
+                               console.error(error);
+                               // toast
+                               const toast = new bootstrap.Toast(document.getElementById('toastErrorLoadingTags'));
+                               toast.show();
+                       });
+       }
+
        function logout(errorCode) {
                axios
                        .get(API_URL + '/users/logout')

diff --git a/frontend/src/routes/(authed)/read/+page.svelte b/frontend/src/routes/(authed)/read/+page.svelte
index 7773867d33508327548dfd1d0be3c042e08c1bcd..4ffa66841948649751c1c2328738bae0dc47fc81 100644 (file)
--- a/frontend/src/routes/(authed)/read/+page.svelte
+++ b/frontend/src/routes/(authed)/read/+page.svelte
@@ -7,13 +7,13 @@
        import { onMount } from 'svelte';
        import { marked } from 'marked';
        import Tag from '$lib/Tag.svelte';
-       import { tags } from '$lib/tagStore.js';
+       import { tags, tagsLoaded } from '$lib/tagStore.js';
        import FileList from '$lib/FileList.svelte';
        import { autoLoadImagesThisDevice, settings } from '$lib/settingsStore';
        import { faCloudArrowDown } from '@fortawesome/free-solid-svg-icons';
        import { Fa } from 'svelte-fa';
        import ImageViewer from '$lib/ImageViewer.svelte';
-       import { alwaysShowSidenav, needsReauthentication, isAuthenticated } from '$lib/helpers.js';
+       import { alwaysShowSidenav } from '$lib/helpers.js';
        import { getTranslate } from '@tolgee/svelte';
 
        const { t } = getTranslate();
@@ -65,13 +65,18 @@
        }
 
        onMount(() => {
-               loadMonthForReading();
                scrollAreaEl = document.getElementById('scrollArea');
                if (scrollAreaEl) {
                        scrollAreaEl.addEventListener('scroll', onScrollHandler, { passive: true });
                }
        });
 
+       $effect(() => {
+               if ($tagsLoaded) {
+                       loadMonthForReading();
+               }
+       });
+
        let currentMonth = $cal.currentMonth;
        let currentYear = $cal.currentYear;
        $effect(() => {
@@ -400,62 +405,76 @@
 
        <!-- Center -->
        <div class="d-flex flex-column my-4 ms-4 flex-fill overflow-y-auto" id="scrollArea">
-               {#each logs as log (log.day)}
-                       <!-- Log-Area -->
-                       {#if ('text' in log && log.text !== '') || log.tags?.length > 0 || log.files?.length > 0}
-                               <div class="log glass mb-3 p-3 d-flex flex-row" data-log-day={log.day}>
-                                       <div class="date me-3 d-flex flex-column align-items-center">
-                                               <p class="dateNumber">{log.day}</p>
-                                               <p class="dateDay">
-                                                       <b>
-                                                               {new Date($cal.currentYear, $cal.currentMonth, log.day).toLocaleDateString(
-                                                                       'locale',
-                                                                       {
-                                                                               weekday: 'long'
-                                                                       }
-                                                               )}
-                                                       </b>
-                                               </p>
-                                       </div>
-                                       <div class="flex-grow-1 middle">
-                                               {#if log.text && log.text !== ''}
-                                                       <div class="text">
-                                                               {@html marked.parse(log.text)}
-                                                       </div>
-                                               {/if}
-                                               {#if log.tags?.length > 0}
-                                                       <div class="tags d-flex flex-row flex-wrap">
-                                                               {#each log.tags as t}
-                                                                       <Tag tag={$tags.find((tag) => tag.id === t)} />
-                                                               {/each}
-                                                       </div>
-                                               {/if}
-                                               {#if log.images?.length > 0}
-                                                       {#if !autoLoadImages && log.images.find((image) => !image.src && !image.loading)}
-                                                               <div class="d-flex flex-row">
-                                                                       <button type="button" class="loadImageBtn" onclick={() => loadImages()}>
-                                                                               <Fa icon={faCloudArrowDown} class="me-2" size="2x" fw /><br />
-                                                                               {$t('settings.read.load_images')}
-                                                                       </button>
+               {#if logs.length > 0}
+                       {#each logs as log (log.day)}
+                               <!-- Log-Area -->
+                               {#if ('text' in log && log.text !== '') || log.tags?.length > 0 || log.files?.length > 0}
+                                       <div class="log glass mb-3 p-3 d-flex flex-row" data-log-day={log.day}>
+                                               <div class="date me-3 d-flex flex-column align-items-center">
+                                                       <p class="dateNumber">{log.day}</p>
+                                                       <p class="dateDay">
+                                                               <b>
+                                                                       {new Date($cal.currentYear, $cal.currentMonth, log.day).toLocaleDateString(
+                                                                               'locale',
+                                                                               {
+                                                                                       weekday: 'long'
+                                                                               }
+                                                                       )}
+                                                               </b>
+                                                       </p>
+                                               </div>
+                                               <div class="flex-grow-1 middle">
+                                                       {#if log.text && log.text !== ''}
+                                                               <div class="text">
+                                                                       {@html marked.parse(log.text)}
                                                                </div>
-                                                       {:else}
-                                                               <ImageViewer images={log.images} />
                                                        {/if}
+                                                       {#if log.tags?.length > 0}
+                                                               <div class="tags d-flex flex-row flex-wrap">
+                                                                       {#each log.tags as t}
+                                                                               <Tag tag={$tags.find((tag) => tag.id === t)} />
+                                                                       {/each}
+                                                               </div>
+                                                       {/if}
+                                                       {#if log.images?.length > 0}
+                                                               {#if !autoLoadImages && log.images.find((image) => !image.src && !image.loading)}
+                                                                       <div class="d-flex flex-row">
+                                                                               <button type="button" class="loadImageBtn" onclick={() => loadImages()}>
+                                                                                       <Fa icon={faCloudArrowDown} class="me-2" size="2x" fw /><br />
+                                                                                       {$t('read.load_images')}
+                                                                               </button>
+                                                                       </div>
+                                                               {:else}
+                                                                       <ImageViewer images={log.images} />
+                                                               {/if}
+                                                       {/if}
+                                               </div>
+
+                                               {#if log.files && log.files.length > 0}
+                                                       <div class="d-flex flex-column ms-3 files">
+                                                               <FileList files={log.files} {downloadFile} />
+                                                       </div>
                                                {/if}
                                        </div>
-
-                                       {#if log.files && log.files.length > 0}
-                                               <div class="d-flex flex-column ms-3 files">
-                                                       <FileList files={log.files} {downloadFile} />
-                                               </div>
-                                       {/if}
+                               {/if}
+                       {/each}
+               {:else}
+                       <div class="d-flex align-items-center justify-content-center h-100">
+                               <div class="glass p-5 rounded-5 no-entries">
+                                       <span id="no-entries">{$t('read.no_entries')}</span>
                                </div>
-                       {/if}
-               {/each}
+                       </div>
+               {/if}
        </div>
 </div>
 
 <style>
+       #no-entries {
+               font-size: 1.5rem;
+               font-weight: 600;
+               opacity: 0.7;
+       }
+
        .sidenav {
                width: 380px;
                min-width: 380px;

diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index b009b7d42020eecb8f68b7def1151e4087e1acb7..80a43f21409453d0e61249a0da7bbf0b76b334ec 100644 (file)
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -63,8 +63,6 @@
                        target: document.querySelector('.TMCommandBar')
                });
 
-               loadTags();
-
                getLog();
 
                // enable popovers
@@ -84,20 +82,6 @@
                }
        });
 
-       function loadTags() {
-               axios
-                       .get(API_URL + '/logs/getTags')
-                       .then((response) => {
-                               $tags = response.data;
-                       })
-                       .catch((error) => {
-                               console.error(error);
-                               // toast
-                               const toast = new bootstrap.Toast(document.getElementById('toastErrorLoadingTags'));
-                               toast.show();
-                       });
-       }
-
        $effect(() => {
                if (currentLog !== savedLog) {
                        document.getElementsByClassName('TinyMDE')[0].classList.add('notSaved');