Merge pull request #14641 from CartoDB/product208-tagslist

[New Dashboard] Tags list in Home Page

assets/stylesheets/new-dashboard/_buttons.scss

@@ -22,7 +22,7 @@ a {
 }
 
 .button--ghost {
-  background: $white;
+  background: transparent;
   color: $primary-color;
 }
 

lib/assets/javascripts/new-dashboard/components/TagCard.vue

@@ -0,0 +1,47 @@
+<template>
+  <router-link :to="{ name: 'tagSearch', params: { tag: tag.tag } }" class="link">
+    <article class="card tag">
+      <h3 class="tag__title title is-medium is-semibold">{{ tag.tag }}</h3>
+      <ul>
+        <li class="tag__count text is-caption">
+          {{ $tc('TagCard.maps', tag.maps, { maps: tag.maps }) }}
+        </li>
+        <li class="tag__count text is-caption">
+          {{ $tc('TagCard.datasets', tag.datasets, { datasets: tag.datasets }) }}
+        </li>
+      </ul>
+    </article>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: 'TagCard',
+  props: {
+    tag: Object
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'stylesheets/new-dashboard/variables';
+
+.card {
+  position: relative;
+  height: 100%;
+  padding: 16px;
+  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid $light-grey;
+  background-color: $white;
+}
+
+.tag__title,
+.tag__count {
+  margin-bottom: 8px;
+  color: $text-color;
+}
+
+.link:hover {
+  text-decoration: none;
+}
+</style>

lib/assets/javascripts/new-dashboard/i18n/locales/en.json

@@ -209,7 +209,7 @@
   },
   "HomePage": {
     "WelcomeSection": {
-      "greeting" : "Hello, {username}",
+      "greeting" : "Hello, {name}",
       "firstTime": {
         "message": "Your brand new CARTO Dashboard is ready! Take a look around and play with it or read more about it on our blog.",
         "planMessage": {
@@ -244,6 +244,14 @@
       "header": "Create your first map to predict key insights",
       "info": "Build your first Location Intelligence anañysis or take a look to our guides and help.",
       "button": "Create your first Map"
+    },
+    "RecentSection": {
+      "title": "Recent content",
+      "viewTagsAction": "View your tags"
+    },
+    "TagsSection": {
+      "title": "Your tags",
+      "viewRecentContentAction": "View recent content"
     }
   },
   "TrialExpired": {
@@ -297,5 +305,9 @@
       "title": "Your organization's administrator",
       "description": "Contact the administrator of your organization if you have issues regarding your account, quotas, etc."
     }
+  },
+  "TagCard": {
+    "maps": "0 maps | {maps} map | {maps} maps",
+    "datasets": "0 datasets | {datasets} dataset | {datasets} datasets"
   }
 }

lib/assets/javascripts/new-dashboard/pages/Home/DatasetsSection/DatasetsSection.vue

@@ -35,7 +35,7 @@
           </template>
         </InitialState>
 
-        <EmptyState v-if="isEmptyState" :text="$t('DataPage.emptyState')" >
+        <EmptyState v-if="isEmptyState" :text="$t('DataPage.emptyCase.default')" >
           <img svg-inline src="../../../assets/icons/common/compass.svg">
         </EmptyState>
 

lib/assets/javascripts/new-dashboard/pages/Home/Home.vue

@@ -1,7 +1,8 @@
 <template>
 <section class="page page--welcome">
   <Welcome />
-  <RecentSection class="section" v-if="hasRecentContent"/>
+  <RecentSection class="section" v-if="isSectionActive('RecentSection') && hasRecentContent" @sectionChange="changeSection"/>
+  <TagsSection class="section tags-section" v-if="isSectionActive('TagsSection')" @sectionChange="changeSection"/>
   <MapsSection class="section" />
   <DatasetsSection class="section section--noBorder" />
   <QuotaSection></QuotaSection>
@@ -10,6 +11,7 @@
 
 <script>
 import Welcome from './WelcomeSection/Welcome.vue';
+import TagsSection from './TagsSection/TagsSection.vue';
 import RecentSection from './RecentSection/RecentSection.vue';
 import MapsSection from './MapsSection/MapsSection.vue';
 import DatasetsSection from './DatasetsSection/DatasetsSection.vue';
@@ -20,6 +22,7 @@ export default {
   name: 'Home',
   components: {
     Welcome,
+    TagsSection,
     RecentSection,
     MapsSection,
     DatasetsSection,
@@ -38,6 +41,11 @@ export default {
     this.$store.dispatch('maps/resetFilters');
     next();
   },
+  data () {
+    return {
+      activeSection: 'RecentSection'
+    };
+  },
   computed: {
     hasRecentContent () {
       return this.$store.getters['recentContent/hasRecentContent'] ||
@@ -46,6 +54,14 @@ export default {
     isFirstTimeViewingDashboard () {
       return this.$store.state.config.isFirstTimeViewingDashboard;
     }
+  },
+  methods: {
+    isSectionActive (activeSection) {
+      return activeSection === this.activeSection;
+    },
+    changeSection (nextActiveSection) {
+      this.activeSection = nextActiveSection;
+    }
   }
 };
 </script>
@@ -56,4 +72,8 @@ export default {
 .page--welcome {
   padding: 64px 0 0;
 }
+
+.tags-section {
+  padding-bottom: 104px;
+}
 </style>

lib/assets/javascripts/new-dashboard/pages/Home/MapsSection/MapsSection.vue

@@ -40,7 +40,7 @@
           @applyOrder="applyOrder"
         ></MapList>
 
-        <EmptyState v-if="isEmptyState" :text="$t('MapsPage.emptyState')" >
+        <EmptyState v-if="isEmptyState" :text="$t('MapsPage.emptyCase.default')" >
           <img svg-inline src="../../../assets/icons/common/compass.svg">
         </EmptyState>
 

lib/assets/javascripts/new-dashboard/pages/Home/RecentSection/RecentSection.vue

@@ -1,10 +1,16 @@
 <template>
   <section class="recent-section is-bgSoftBlue">
     <div class="container">
-      <SectionTitle class="grid-cell" title="Recent content">
+      <SectionTitle class="grid-cell" :title="$t('HomePage.RecentSection.title')">
         <template slot="icon">
           <img src="../../../assets/icons/section-title/recent.svg">
         </template>
+
+        <template slot="actionButton">
+          <button class="button button--small is-primary button--ghost" @click="goToTagsSection">
+            {{ $t('HomePage.RecentSection.viewTagsAction') }}
+          </button>
+        </template>
       </SectionTitle>
 
       <ul class="grid">
@@ -39,6 +45,11 @@ export default {
     visibleSections () {
       return ['privacy', 'lastModification'];
     }
+  },
+  methods: {
+    goToTagsSection () {
+      this.$emit('sectionChange', 'TagsSection');
+    }
   }
 };
 </script>

lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue

@@ -0,0 +1,94 @@
+<template>
+  <section class="tags-section is-bgSoftBlue">
+    <div class="container">
+      <SectionTitle class="grid-cell" :title="$t('HomePage.TagsSection.title')">
+        <template slot="icon">
+          <img src="../../../assets/icons/section-title/tags.svg">
+        </template>
+
+        <template slot="actionButton">
+          <button class="button button--small is-primary button--ghost" @click="goToRecentSection">
+            {{ $t('HomePage.TagsSection.viewRecentContentAction') }}
+          </button>
+        </template>
+      </SectionTitle>
+
+      <ul class="grid">
+        <li class="card grid-cell grid-cell--col4 grid-cell--col6--tablet grid-cell--col12--mobile tag-element" v-for="tag in tags" :key="tag.tag">
+          <TagCard :tag="tag" />
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script>
+import SectionTitle from 'new-dashboard/components/SectionTitle';
+import TagCard from 'new-dashboard/components/TagCard.vue';
+
+export default {
+  name: 'TagsSection',
+  components: {
+    SectionTitle,
+    TagCard
+  },
+  data () {
+    return {
+      // TODO: Retrieve tags from API when endpoint is ready
+      tags: [
+        {
+          tag: 'Blog',
+          maps: 2,
+          datasets: 3
+        },
+        {
+          tag: 'Catalog',
+          maps: 1,
+          datasets: 4
+        },
+        {
+          tag: 'Customer',
+          maps: 3,
+          datasets: 4
+        },
+        {
+          tag: 'David',
+          maps: 3,
+          datasets: 4
+        },
+        {
+          tag: 'Website',
+          maps: 4,
+          datasets: 1
+        },
+        {
+          tag: 'Production',
+          maps: 2,
+          datasets: 3
+        },
+        {
+          tag: 'Census',
+          maps: 4,
+          datasets: 3
+        },
+        {
+          tag: 'Client',
+          maps: 2,
+          datasets: 4
+        }
+      ]
+    };
+  },
+  methods: {
+    goToRecentSection () {
+      this.$emit('sectionChange', 'RecentSection');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tag-element {
+  margin-bottom: 24px;
+}
+</style>

lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/Welcome.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="welcome-section">
-    <WelcomeFirst v-if="isFirst" :username="username" :userType="userType"></WelcomeFirst>
-    <WelcomeCompact v-if="!isFirst" :username="username" :userType="userType">
+    <WelcomeFirst v-if="isFirst" :name="name" :userType="userType"></WelcomeFirst>
+    <WelcomeCompact v-if="!isFirst" :name="name" :userType="userType">
       <template v-if="trialEndDate">
         <span class="text is-small">{{ trialTimeLeft }}</span>
         <a class="button button--small button--outline" :href="accountUpdateURL">
@@ -35,7 +35,7 @@ export default {
       accountUpdateURL: state => state.config.accountUpdateURL,
       trialEndDate: state => state.user.trial_ends_at,
       user: state => state.user,
-      username: state => state.user.username,
+      name: state => state.user.name || state.user.username,
       organization: state => state.user.organization,
       notifications: state => state.user.organizationNotifications
     }),

lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeCompact.vue

@@ -23,11 +23,11 @@ export default {
     CreateButton
   },
   props: {
-    username: String
+    name: String
   },
   computed: {
     greeting () {
-      return this.$t('HomePage.WelcomeSection.greeting', {username: this.$props.username});
+      return this.$t('HomePage.WelcomeSection.greeting', {name: this.$props.name});
     }
   }
 };

lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeFirst.vue

@@ -30,12 +30,12 @@ export default {
     CreateButton
   },
   props: {
-    username: String,
+    name: String,
     userType: String
   },
   computed: {
     greeting () {
-      return this.$t('HomePage.WelcomeSection.greeting', {username: this.$props.username});
+      return this.$t('HomePage.WelcomeSection.greeting', {name: this.$props.name});
     },
     text () {
       const organizationName = this.$store.state.user.organization && this.$store.state.user.organization.name;

lib/assets/test/spec/new-dashboard/unit/specs/components/TagCard.spec.js

@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import TagCard from 'new-dashboard/components/TagCard';
+
+const $tc = key => key;
+
+describe('TagCard', () => {
+  it('should render properly', () => {
+    const tagCardElement = shallowMount(TagCard, {
+      propsData: {
+        tag: {
+          tag: 'Test Tag',
+          maps: 1,
+          datasets: 3
+        }
+      },
+      mocks: {
+        $tc
+      }
+    });
+
+    expect(tagCardElement).toMatchSnapshot();
+  });
+});

lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/TagCard.spec.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagCard should render properly 1`] = `
+<router-link to="[object Object]" class="link">
+  <article class="card tag">
+    <h3 class="tag__title title is-medium is-semibold">Test Tag</h3>
+    <ul>
+      <li class="tag__count text is-caption">
+        TagCard.maps
+      </li>
+      <li class="tag__count text is-caption">
+        TagCard.datasets
+      </li>
+    </ul>
+  </article>
+</router-link>
+`;