PR for the Step 1 of #1619 (#1899)

* add a button for global-dashboard in GroupsList.vue

* add GlobalDashboard.vue with boilerplate content

* make vue-router work with global-dashboard settings

* configure GlobalDashboard.vue to update the content based on the route path

* add dummy posts and render them with card UI

* use markdown pkg to render the post content

* fix for some cypress tests

* move the settings data to router.js

* move the export back to misc.js

* move the settings object to GlobalDashboard.vue file

frontend/assets/style/_icons.scss

@@ -69,7 +69,8 @@ $icons: (
   magnifying-minus: "\f010",
   magnifying-plus: "\f00e",
   paper-clip: "\f0c6",
-  file: "\f15c"
+  file: "\f15c",
+  newspaper: "\f1ea"
 );
 
 @font-face {

frontend/assets/style/components/_custom-markdowns.scss

@@ -77,8 +77,7 @@
     }
   }
 
-  a {
-    color: $primary_0;
-    text-decoration: underline;
+  .link {
+    border-bottom-color: currentColor;
   }
 }

frontend/controller/router.js

@@ -18,6 +18,7 @@ const lazyContributions = lazyPage(() => import('@pages/Contributions.vue'))
 const lazyDesignSystem = lazyPage(() => import('@pages/DesignSystem.vue'))
 const lazyGroupChat = lazyPage(() => import('@pages/GroupChat.vue'))
 const lazyGroupDashboard = lazyPage(() => import('@pages/GroupDashboard.vue'))
+const lazyGlobalDashboard = lazyPage(() => import('@pages/GlobalDashboard.vue'))
 const lazyGroupSettings = lazyPage(() => import('@pages/GroupSettings.vue'))
 const lazyPayments = lazyPage(() => import('@pages/Payments.vue'))
 const lazyPendingApproval = lazyPage(() => import('@pages/PendingApproval.vue'))
@@ -98,6 +99,16 @@ const router: any = new Router({
       meta: { title: L('Group Dashboard') },
       beforeEnter: createEnterGuards(loginGuard, groupGuard, pendingApprovalGuard)
     },
+    {
+      path: '/global-dashboard/:id',
+      component: lazyGlobalDashboard,
+      name: 'GlobalDashboard',
+      meta: { title: L('Global Dashboard') },
+      beforeEnter: createEnterGuards(loginGuard, groupGuard)
+    },
+    {
+      path: '/global-dashboard', redirect: '/global-dashboard/news-and-updates'
+    },
     {
       path: '/contributions',
       component: lazyContributions,

frontend/views/containers/global-dashboard/DirectMessages.vue

@@ -0,0 +1,14 @@
+<template lang='pug'>
+.c-news-and-updates-container
+  i18n(tag='p') Direct Messages: Coming soon!
+</template>
+
+<script>
+export default ({
+  name: 'NewAndUpdates'
+}: Object)
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/style/_variables.scss";
+</style>

frontend/views/containers/global-dashboard/NewsAndUpdates.vue

@@ -0,0 +1,101 @@
+<template lang='pug'>
+.c-news-and-updates-container
+  .c-post-block(v-for='post in dummyPosts' :key='post.id')
+    .c-post-created-date {{ humanDate(post.createdAt, { month: 'long', year: 'numeric', day: 'numeric' }) }}
+
+    .card.c-post-card
+      .c-post-img-container
+        avatar.c-post-img(
+          src='/assets/images/group-income-icon-transparent-circle.png'
+          alt='GI Logo'
+          size='xs'
+        )
+      .c-post-content
+        h3.is-title-4 {{ post.title }}
+        p(v-safe-html:a='convertToMarkdown(post.content)')
+</template>
+
+<script>
+import { humanDate } from '@model/contracts/shared/time.js'
+import { convertToMarkdown } from '@view-utils/convert-to-markdown.js'
+import Avatar from '@components/Avatar.vue'
+
+const dummyPosts = [
+  {
+    id: 'dummy-post-1',
+    createdAt: new Date('2023-06-08'),
+    title: 'The Prototype is Ready',
+    content: "It's been quite a journey, but we're finally here. A new kind of software is ready for testing. " +
+      "If you have a group of friends/family that's interested in supporting one another using monetary and non-monetary means, " +
+      "you're a perfect fit to try out the Group Income prototype, and we want to hear from you! Read more on our blog: " +
+      '[https://groupincome.org/2023/06/the-prototype-is-ready/](https://groupincome.org/2023/06/the-prototype-is-ready/)'
+  },
+  {
+    id: 'dummy-post-2',
+    createdAt: new Date('2021-06-08'),
+    title: 'Roadmap Updates',
+    content: "Some say it's not the destination that matters so much, but the journey and friends you meet along the way. " +
+    "I couldn't agree more. But also, destinations aren't to be underestimated either! Back in 2019, during the Before Times, " +
+    'our team — a mixture of independent contractors and volunteers — got together. Read more on our blog: ' +
+    '[https://groupincome.org/2021/06/bulgaria-hackathon-2019-roadmap-updates-hiring/](https://groupincome.org/2021/06/bulgaria-hackathon-2019-roadmap-updates-hiring/)'
+  }
+]
+
+export default ({
+  name: 'NewAndUpdates',
+  components: {
+    Avatar
+  },
+  data () {
+    return {
+      dummyPosts
+    }
+  },
+  methods: {
+    humanDate,
+    convertToMarkdown
+  }
+}: Object)
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/style/_variables.scss";
+
+.c-post-block {
+  position: relative;
+  width: 100%;
+  margin-bottom: 2rem;
+}
+
+.c-post-created-date {
+  padding-left: 1rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.c-post-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+
+  .c-post-img-container {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 50%;
+    background-color: $general_2;
+    flex-shrink: 0;
+  }
+
+  .c-post-content {
+    flex-grow: 1;
+
+    h3 {
+      margin-bottom: 0.25rem;
+    }
+  }
+}
+</style>

frontend/views/containers/navigation/GroupsList.vue

@@ -1,10 +1,20 @@
 <template lang='pug'>
 ul.c-group-list(v-if='groupsByName.length' data-test='groupsList')
+  li.c-group-list-item.group-badge(:class='{ "is-active": isInGlobalDashboard }')
+    tooltip(
+      direction='right'
+      :text='L("Global dashboard")'
+    )
+      button.c-group-picture.is-unstyled.c-global-dashboard-logo(@click='onGlobalDashboardClick')
+        avatar.c-avatar(
+          src='/assets/images/group-income-icon-transparent-circle.png'
+          alt='Global dashboard logo'
+        )
+
   li.c-group-list-item.group-badge(
     v-for='(group, index) in groupsByName'
     :key='`group-${index}`'
-    tag='button'
-    :class='{ "is-active": currentGroupId === group.contractID}'
+    :class='{ "is-active": !isInGlobalDashboard && currentGroupId === group.contractID}'
   )
     tooltip(
       direction='right'
@@ -64,6 +74,9 @@ export default ({
           this.groupUnreadMessages(group.contractID) + this.unreadGroupNotificationCountFor(group.contractID) > 0
         ]))
       )
+    },
+    isInGlobalDashboard () {
+      return this.$route.path.startsWith('/global-dashboard')
     }
   },
   methods: {
@@ -72,6 +85,13 @@ export default ({
     },
     handleMenuSelect (id) {
       id && this.changeGroup(id)
+
+      if (this.isInGlobalDashboard) {
+        this.$router.push('/dashboard')
+      }
+    },
+    onGlobalDashboardClick () {
+      this.$router.push(({ path: '/global-dashboard' }))
     },
     changeGroup (hash) {
       const path = this.$route.path
@@ -174,5 +194,17 @@ export default ({
 
 .c-group-picture {
   display: flex;
+
+  &.c-global-dashboard-logo {
+    background-color: $background_0;
+    border-radius: 50%;
+    width: 2.5rem;
+    height: 2.5rem;
+
+    ::v-deep img.c-avatar {
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+  }
 }
 </style>