feat(seaside): #176 add read on click for news card

close #176
Marthym · Aug 26, 2023 · 68fcf96 · 68fcf96
1 parent ebdc9c1
commit 68fcf96
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/seaside/src/techwatch/components/newslist/NewsCard.vue b/seaside/src/techwatch/components/newslist/NewsCard.vue
@@ -22,15 +22,17 @@
     <div :class="{ 'm-6': card.isActive, 'm-4': !card.isActive}" class="flex-grow">
       <div class="flex flex-col h-full overflow-hidden">
         <a class="font-semibold text-xl" target="_blank" :href="card.data.link" :title="card.data.link"
-           v-html="card.data.title"></a>
+           @auxclick="$emit('clickTitle')"
+           @click="$emit('clickTitle')" v-html="card.data.title"></a>
         <span v-html="card.data.description" class="mt-2 text-base flex-grow max-h-80 overflow-hidden"></span>
 
         <div class="flex flex-row flex-wrap-reverse lg:justify-end text-xs mt-2">
           <slot name="actions"></slot>
           <span class="grow"></span>
           <span class="italic self-start lg:block">{{ publication }}</span>
           <div class="text-right lg:whitespace-nowrap order-last basis-full">
-            <button class="badge badge-neutral badge-sm m-px rounded lg:whitespace-nowrap order-last basis-full" @click.stop="$emit('addFilter', {type: 'feed', entity: f})"
+            <button class="badge badge-neutral badge-sm m-px rounded lg:whitespace-nowrap order-last basis-full"
+                    @click.stop="$emit('addFilter', {type: 'feed', entity: f})"
                     v-for="f in card.data.feeds">{{ f.name }}
             </button>
           </div>
@@ -41,13 +43,13 @@
 </template>
 
 <script lang="ts">
-import {Component, Prop, Vue} from 'vue-facing-decorator';
-import {NewsView} from "@/techwatch/components/newslist/model/NewsView";
-import {ImgHTMLAttributes} from "vue";
+import { Component, Prop, Vue } from 'vue-facing-decorator';
+import { NewsView } from '@/techwatch/components/newslist/model/NewsView';
+import { ImgHTMLAttributes } from 'vue';
 
 const EMPTY_IMAGE_DATA: string = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 
-@Component({name: 'NewsCard', emits: ['activate', 'addFilter']})
+@Component({ name: 'NewsCard', emits: ['activate', 'addFilter', 'clickTitle'] })
 export default class NewsCard extends Vue {
   @Prop() card: NewsView;
 
@@ -59,7 +61,7 @@ export default class NewsCard extends Vue {
     if (this.card) {
       return new Date(this.card.data.publication).toLocaleDateString(navigator.languages, {
         timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-        year: 'numeric', month: 'short', day: '2-digit', hour: "2-digit", minute: "2-digit"
+        year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit',
       });
     } else {
       return undefined;

diff --git a/seaside/src/techwatch/components/newslist/NewsList.vue b/seaside/src/techwatch/components/newslist/NewsList.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="max-w-5xl" ref="news-list">
     <template v-for="(card, idx) in news" :key="card.data.id">
-      <NewsCard :ref="card.data.id" :card="card" @activate="activateNewsCard(idx)" @addFilter="onAddFilter">
+      <NewsCard :ref="card.data.id" :card="card"
+                @activate="activateNewsCard(idx)" @addFilter="onAddFilter" @clickTitle="markNewsRead(idx, true)">
         <template #actions v-if="userStore.isAuthenticated">
           <div class="join -ml-2 lg:ml-0">
             <button v-if="card.data.state.read" @click.stop="toggleRead(idx)"
@@ -271,6 +272,7 @@ export default class NewsList extends Vue implements ScrollActivable, InfiniteSc
   }
 
   private markNewsRead(idx: number, mark: boolean) {
+    console.log("markNewsRead", idx)
     if (!this.isAuthenticated) {
       return;
     }