feat: Display the article views count in news detail - EXO-74549 - Me…

…eds-io/MIPs#161
Meeds-io · Oct 15, 2024 · afbafaa · afbafaa
1 parent 63d2d8a
commit afbafaa
Showing 1 changed file with 27 additions and 0 deletions.
diff --git a/content-webapp/src/main/webapp/vue-app/news-details/components/ExoNewsDetailsBody.vue b/content-webapp/src/main/webapp/vue-app/news-details/components/ExoNewsDetailsBody.vue
@@ -40,6 +40,21 @@
             <span>
               {{ newsTitle }}
             </span>
+            <v-tooltip bottom>
+              <template #activator="{ on, attrs }">
+                <span v-on="on" v-bind="attrs">
+                  <v-icon size="20" >
+                    fas fa-eye
+                  </v-icon>
+                  <span class="text-subtitle">
+                    {{ newsViews }}
+                  </span>
+                </span>
+              </template>
+              <span class="caption">
+                {{ newsViewsCount }}
+              </span>
+            </v-tooltip>
             <span>
               <content-translation-menu
                 :translations="translations"
@@ -193,6 +208,18 @@ export default {
     newsTitle() {
       return this.news && this.newsTitleContent;
     },
+    newsViewsCount() {
+      return `${this.news?.viewsCount} views`;
+    },
+    newsViews() {
+      if (this.news?.viewsCount < 999) {
+        return this.news?.viewsCount;
+      }
+      if (this.news?.viewsCount < 1000000) {
+        return `${(this.news?.viewsCount / 1000).toFixed(1)}k`;
+      }
+      return '+999k';
+    },
     articleUpdater() {
       return this.news?.updater || this.news?.author;
     },