feat(dashboard): refactor dashboard view + add recent spaces list

package.json

@@ -15,6 +15,7 @@
     "@bimdata/utils": "^0.2.15",
     "@uppy/core": "^1.15.0",
     "@uppy/xhr-upload": "^1.6.8",
+    "detect-browser": "^5.2.0",
     "oidc-client": "^1.10.1",
     "seedrandom": "^3.0.5",
     "vue": "^3.0.0",

src/App.vue

@@ -2,13 +2,6 @@
   <router-view />
 </template>
 
-<style>
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}
+<style lang="scss">
+@import './global.scss';
 </style>

src/Layout.scss

@@ -2,6 +2,4 @@
   width: 100vw;
   height: 100vh;
   background-color: $color-tertiary-lightest;
-  font-family: $primary-font;
-  font-size: $font-size;
 }

src/components/dashboard-button-tile/DashboardButtonTile.scss

@@ -0,0 +1,46 @@
+.dashboard-button-tile {
+  display: grid;
+  grid-template-rows: 1fr 1fr 2fr;
+  padding: $spacing-unit*2;
+  border-radius: $spacing-unit;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  background-color: $color-white;
+
+  &__title {
+    font-size: $font-size*3/2;
+    font-weight: bold;
+  }
+
+  &__number {
+    font-size: $font-size*3;
+    font-weight: bold;
+  }
+
+  &__text {
+    align-self: end;
+    text-transform: uppercase;
+    .arrow-icon {
+      transform: rotate(180deg);
+      margin-left: $spacing-unit;
+      vertical-align: text-bottom;
+    }
+  }
+
+  cursor: pointer;
+  transition-duration: 0.35s;
+  &:hover {
+    transform: scale(1.02);
+  }
+
+
+  &.primary {
+    background-color: $color-primary;
+    color: $color-white;
+  }
+
+  &.secondary {
+    background-color: $color-secondary;
+    color: $color-primary;
+  }
+
+}

src/components/dashboard-button-tile/DashboardButtonTile.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="dashboard-button-tile" :class="color">
+    <span class="dashboard-button-tile__title">
+      <slot name=title></slot>
+    </span>
+    <span class="dashboard-button-tile__number">
+      <slot name="number"></slot>
+    </span>
+    <span class="dashboard-button-tile__text">
+      <slot name="text"></slot>
+      <BIMDataIcon class="arrow-icon" name="arrow" size="s" />
+    </span>
+  </div>
+</template>
+
+<script>
+import BIMDataIcon from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js';
+
+export default {
+  components: {
+    BIMDataIcon
+  },
+  props: {
+    color: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss" src="./DashboardButtonTile.scss"></style>

src/components/dashboard-info-tile/DashboardInfoTile.scss

@@ -0,0 +1,25 @@
+.dashboard-info-tile {
+  padding: $spacing-unit*2;
+  border-radius: $spacing-unit;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+  background-color: $color-white;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    padding-bottom: $spacing-unit;
+    border-bottom: 1px solid $color-tertiary;
+    font-size: $font-size*3/2;
+    font-weight: bold;
+    &__icon {
+      margin-left: auto;
+    }
+  }
+
+  &__body {
+    display: grid;
+    gap: $spacing-unit;
+    padding: $spacing-unit*2 $spacing-unit;
+    color: $color-tertiary-dark;
+  }
+}

src/components/dashboard-info-tile/DashboardInfoTile.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="dashboard-info-tile">
+    <div class="dashboard-info-tile__head">
+      <span class="dashboard-info-tile__head__title">
+        {{ $t('Dashboard.security') }}
+      </span>
+      <BIMDataIcon class="dashboard-info-tile__head__icon"
+        name="information" size="s"
+      />
+    </div>
+    <div class="dashboard-info-tile__body">
+      <span>Last login 1 January at 10:30 AM</span>
+      <span>IP: 127.0.0.1</span>
+      <span>{{browserName}}/{{browserVersion}} ({{os}})</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { detect as detectBrowser } from 'detect-browser';
+// Components
+import BIMDataIcon from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js';
+
+export default {
+  components: {
+    BIMDataIcon
+  },
+  setup() {
+    const { name, version: browserVersion, os } = detectBrowser();
+
+    const browserName = name.split('-').map(s => `${s[0].toUpperCase()}${s.slice(1)}`).join(' ');
+
+    return {
+      // References
+      browserName,
+      browserVersion,
+      os,
+    };
+  }
+}
+</script>
+
+<style scoped lang="scss" src="./DashboardInfoTile.scss"></style>

src/components/dashboard-welcome-tile/DashboardWelcomeTile.scss

@@ -0,0 +1,29 @@
+.dashboard-welcome-tile {
+  display: grid;
+  grid-template-rows: 2fr 1fr;
+  grid-template-columns: 80px auto;
+  grid-template-areas:
+    "logo title"
+    "logo message"
+  ;
+  gap: $spacing-unit;
+  margin: 0 $spacing-unit/2;
+  color: $color-primary;
+
+  &__logo {
+    grid-area: logo;
+    justify-self: center;
+    align-self: center;
+  }
+
+  &__title {
+    grid-area: title;
+    align-self: end;
+    font-size: 34px;
+    font-weight: bold;
+  }
+
+  &__message {
+    grid-area: message;
+  }
+}

src/components/dashboard-welcome-tile/DashboardWelcomeTile.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="dashboard-welcome-tile">
+    <img class="dashboard-welcome-tile__logo" 
+      alt="Platform Dashboard logo" 
+      src="@/assets/dashboard-logo.svg"
+    />
+    <span class="dashboard-welcome-tile__title">
+      {{ $t('Dashboard.welcomeTitle') }}
+    </span>
+    <span class="dashboard-welcome-tile__message">
+      {{ $t('Dashboard.welcomeMessage', { name: firstName }) }}
+    </span>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { useGlobalState } from '@/state/globalState';
+
+export default {
+  setup() {
+    const { user } = useGlobalState();
+
+    const firstName = ref(user.value.profile.given_name);
+
+    return {
+      // References
+      firstName,
+    };
+  }
+}
+</script>
+
+<style scoped lang="scss" src="./DashboardWelcomeTile.scss"></style>

src/components/recent-spaces-list/RecentSpacesList.scss

@@ -0,0 +1,10 @@
+.recent-spaces-list {
+  &__title {
+    padding: $spacing-unit/2 $spacing-unit;
+  }
+
+  &__content {
+    display: flex;
+    overflow-x: auto;
+  }
+}

src/components/recent-spaces-list/RecentSpacesList.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="recent-spaces-list">
+    <div class="recent-spaces-list__title">{{ $t('RecentSpacesList.title') }}</div>
+    <div class="recent-spaces-list__content">
+      <SpaceCard v-for="space in recentSpaces" :key="space.id"
+        :space="space"
+        :actionMenu="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, ref } from 'vue';
+import { useSpacesState } from '@/state/spacesState';
+// Components
+import SpaceCard from '@/components/space-card/SpaceCard';
+
+export default {
+  components: {
+    SpaceCard
+  },
+  setup() {
+    const { spaces, fetchSpaces } = useSpacesState();
+
+    const recentSpaces = ref([]);
+
+    onMounted(() => {
+      fetchSpaces().then(() => {
+        recentSpaces.value = spaces.value.slice()
+          .sort((a, b) => a.updatedAt < b.updatedAt ? 1 : -1)
+          .slice(0, 10);
+      });
+    });
+
+    return {
+      recentSpaces
+    };
+  }
+}
+</script>
+
+<style scoped lang="scss" src="./RecentSpacesList.scss"></style>

src/components/space-card/SpaceCard.vue

@@ -1,7 +1,7 @@
 <template>
   <BIMDataCard class="space-card">
     <template #right>
-      <SpaceActionMenu :space="space" />
+      <SpaceActionMenu v-if="actionMenu" :space="space" />
     </template>
     <template #content>
       <SpaceImage :space="space" />
@@ -29,6 +29,10 @@ export default {
     space: {
       type: Object,
       required: true
+    },
+    actionMenu: {
+      type: Boolean,
+      default: true
     }
   }
 }

src/global.scss

@@ -0,0 +1,10 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: $primary-font;
+  font-size: $font-size;
+}

src/i18n/lang/en.js

@@ -49,5 +49,8 @@ export default {
       message: 'Are you sure ?',
       buttonDelete: 'Delete',
     }
-  }
+  },
+  RecentSpacesList: {
+    title: 'Espaces récents'
+  },
 };

src/i18n/lang/fr.js

@@ -49,5 +49,8 @@ export default {
       message: 'Êtes vous sûr de vouloir supprimer (définitivement) cet espace ?',
       buttonDelete: 'Supprimer',
     }
-  }
+  },
+  RecentSpacesList: {
+    title: 'Espaces récents'
+  },
 };

src/variables.scss

@@ -0,0 +1,3 @@
+$header-height: 74px;
+$header-margin: $spacing-unit;
+$box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);