feat(dashboard): add recent projects list to dashboard

src/components/breadcrumb-space-selector/BreadcrumbSpaceSelector.vue

@@ -20,7 +20,7 @@ export default {
   },
   setup() {
     const router = useRouter();
-    const { spaces, currentSpace } = useSpaces();
+    const { userSpaces, currentSpace } = useSpaces();
 
     const changeSpace = space => {
       router.push({
@@ -32,7 +32,7 @@ export default {
     return {
       // References
       currentSpace,
-      spaces,
+      spaces: userSpaces,
       // Methods
       changeSpace
     };

src/components/project-card/ProjectCard.scss

@@ -1,4 +1,5 @@
 .project-card {
+  min-width: $platform-project-card-width;
   width: $platform-project-card-width;
   height: $platform-project-card-height;
 

src/components/project-card/ProjectCard.vue

@@ -7,7 +7,11 @@
     <template #front-face>
       <BIMDataCard>
         <template #left>
-          <ProjectActionBar :project="project" @open-menu="openMenu" />
+          <ProjectActionBar
+            v-if="actionMenu"
+            :project="project"
+            @open-menu="openMenu"
+          />
         </template>
         <template #content>
           <div class="left-stripe"></div>
@@ -47,6 +51,10 @@ export default {
     project: {
       type: Object,
       required: true
+    },
+    actionMenu: {
+      type: Boolean,
+      default: true
     }
   },
   setup() {

src/components/recent-projects-list/RecentProjectsList.scss

@@ -0,0 +1,13 @@
+.recent-projects-list {
+  &__title {
+    padding: $spacing-unit/2 $spacing-unit;
+    font-weight: bold;
+  }
+
+  &__content {
+    display: flex;
+    gap: $spacing-unit * 2;
+    padding: $spacing-unit;
+    overflow-x: auto;
+  }
+}

src/components/recent-projects-list/RecentProjectsList.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="recent-projects-list">
+    <div class="recent-projects-list__title">
+      {{ $t("RecentProjectsList.title") }}
+    </div>
+    <div class="recent-projects-list__content">
+      <ProjectCard
+        v-for="project in recentProjects"
+        :key="project.id"
+        :project="project"
+        :actionMenu="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watchEffect } from "vue";
+import { useProjects } from "@/state/projects";
+// Components
+import ProjectCard from "@/components/project-card/ProjectCard";
+
+export default {
+  components: {
+    ProjectCard
+  },
+  setup() {
+    const { userProjects } = useProjects();
+
+    const recentProjects = ref([]);
+
+    watchEffect(() => {
+      if (userProjects.value) {
+        recentProjects.value = userProjects.value
+          .slice()
+          .sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1))
+          .slice(0, 7);
+      }
+    });
+
+    return {
+      recentProjects
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./RecentProjectsList.scss"></style>

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

@@ -1,12 +1,12 @@
 .recent-spaces-list {
-
   &__title {
     padding: $spacing-unit/2 $spacing-unit;
+    font-weight: bold;
   }
-  
+
   &__content {
     display: flex;
-    gap: $spacing-unit*2;
+    gap: $spacing-unit * 2;
     padding: $spacing-unit;
     overflow-x: auto;
   }

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

@@ -25,13 +25,13 @@ export default {
     SpaceCard
   },
   setup() {
-    const { spaces } = useSpaces();
+    const { userSpaces } = useSpaces();
 
     const recentSpaces = ref([]);
 
     watchEffect(() => {
-      if (spaces.value) {
-        recentSpaces.value = spaces.value
+      if (userSpaces.value) {
+        recentSpaces.value = userSpaces.value
           .slice()
           .sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1))
           .slice(0, 7);

src/i18n/lang/en.js

@@ -56,7 +56,10 @@ export default {
     }
   },
   RecentSpacesList: {
-    title: "Espaces récents"
+    title: "Recent spaces"
+  },
+  RecentProjectsList: {
+    title: "Recent projects"
   },
   Projects: {
     searchProjects: "Search projets",

src/i18n/lang/fr.js

@@ -60,6 +60,9 @@ export default {
   RecentSpacesList: {
     title: "Espaces récents"
   },
+  RecentProjectsList: {
+    title: "Projets récents"
+  },
   Projects: {
     searchProjects: "Rechercher un projet",
     ProjectCreationCard: {

src/router/resolvers.js

@@ -12,18 +12,35 @@ const createViewResolver = resolve => {
   };
 };
 
-const dashboardResolver = createViewResolver(() => useSpaces().loadSpaces());
+const dashboardResolver = createViewResolver(async () => {
+  const { loadUserSpaces } = useSpaces();
+  const { loadUserProjects } = useProjects();
 
-const spacesResolver = createViewResolver(() => useSpaces().loadSpaces());
+  await loadUserSpaces();
+  await loadUserProjects();
+  return;
+});
+
+const spacesResolver = createViewResolver(async () => {
+  const { loadUserSpaces } = useSpaces();
+
+  await loadUserSpaces();
+  return;
+});
 
 const spaceBoardResolver = createViewResolver(async route => {
-  const { currentSpace, loadSpaces, loadSpaceUsers, selectSpace } = useSpaces();
-  const { loadProjects } = useProjects();
+  const {
+    currentSpace,
+    loadUserSpaces,
+    loadSpaceUsers,
+    selectSpace
+  } = useSpaces();
+  const { loadSpaceProjects } = useProjects();
 
-  await loadSpaces();
+  await loadUserSpaces();
   await selectSpace(+route.params.spaceID);
   await loadSpaceUsers(currentSpace.value);
-  await loadProjects(currentSpace.value);
+  await loadSpaceProjects(currentSpace.value);
   return;
 });
 

src/server/ProjectService.js

@@ -1,6 +1,10 @@
 import apiClient from "./api-client";
 
 class ProjectService {
+  fetchUserProjects() {
+    return apiClient.collaborationApi.getSelfProjects();
+  }
+
   fetchSpaceProjects(space) {
     return apiClient.collaborationApi.getProjects({
       cloudPk: space.id

src/state/projects.js

@@ -1,41 +1,49 @@
 import { reactive, readonly, toRefs } from "vue";
 import IfcService from "@/server/IfcService";
-import ProjectsService from "@/server/ProjectService";
+import ProjectService from "@/server/ProjectService";
 
 const state = reactive({
-  projects: [],
+  userProjects: [],
+  spaceProjects: [],
   currentProject: null
 });
 
-const loadProjects = async space => {
-  state.projects = await ProjectsService.fetchSpaceProjects(space);
-  return state.projects;
+const loadUserProjects = async () => {
+  state.userProjects = await ProjectService.fetchUserProjects();
+  return state.userProjects;
+};
+
+const loadSpaceProjects = async space => {
+  state.spaceProjects = await ProjectService.fetchSpaceProjects(space);
+  return state.spaceProjects;
 };
 
 const createProject = async (space, project) => {
-  const newProject = await ProjectsService.createProject(space, project);
-  state.projects = [newProject].concat(state.projects);
+  const newProject = await ProjectService.createProject(space, project);
+  state.spaceProjects = [newProject].concat(state.spaceProjects);
   return newProject;
 };
 
 const updateProject = async project => {
-  const newProject = await ProjectsService.updateProject(project);
+  const newProject = await ProjectService.updateProject(project);
   softUpdateProject(newProject);
   return newProject;
 };
 
 const softUpdateProject = project => {
-  state.projects = state.projects.map(p => (p.id === project.id ? project : p));
+  state.spaceProjects = state.spaceProjects.map(p =>
+    p.id === project.id ? project : p
+  );
 };
 
 const deleteProject = async project => {
-  await ProjectsService.deleteProject(project);
-  state.projects = state.projects.filter(p => p.id !== project.id);
+  await ProjectService.deleteProject(project);
+  state.spaceProjects = state.spaceProjects.filter(p => p.id !== project.id);
   return project;
 };
 
 const selectProject = id => {
-  state.currentProject = state.projects.find(p => p.id === id) || null;
+  state.currentProject = state.spaceProjects.find(p => p.id === id) || null;
   return state.currentProject;
 };
 
@@ -51,7 +59,8 @@ export function useProjects() {
   const readonlyState = readonly(state);
   return {
     ...toRefs(readonlyState),
-    loadProjects,
+    loadUserProjects,
+    loadSpaceProjects,
     createProject,
     updateProject,
     softUpdateProject,

src/state/spaces.js

@@ -2,15 +2,15 @@ import { reactive, readonly, toRefs } from "vue";
 import SpaceService from "@/server/SpaceService";
 
 const state = reactive({
-  spaces: [],
+  userSpaces: [],
   currentSpace: null,
   currentSpaceAdmins: [],
   currentSpaceUsers: []
 });
 
-const loadSpaces = async () => {
-  state.spaces = await SpaceService.fetchUserSpaces();
-  return state.spaces;
+const loadUserSpaces = async () => {
+  state.userSpaces = await SpaceService.fetchUserSpaces();
+  return state.userSpaces;
 };
 
 const loadSpaceUsers = async space => {
@@ -22,7 +22,7 @@ const loadSpaceUsers = async space => {
 
 const createSpace = async space => {
   const newSpace = await SpaceService.createSpace(space);
-  state.spaces = [newSpace].concat(state.spaces);
+  state.userSpaces = [newSpace].concat(state.userSpaces);
   return newSpace;
 };
 
@@ -33,7 +33,7 @@ const updateSpace = async space => {
 };
 
 const softUpdateSpace = space => {
-  state.spaces = state.spaces.map(s => (s.id === space.id ? space : s));
+  state.userSpaces = state.userSpaces.map(s => (s.id === space.id ? space : s));
 };
 
 const removeSpaceImage = async space => {
@@ -44,12 +44,12 @@ const removeSpaceImage = async space => {
 
 const deleteSpace = async space => {
   await SpaceService.deleteSpace(space);
-  state.spaces = state.spaces.filter(s => s.id !== space.id);
+  state.userSpaces = state.userSpaces.filter(s => s.id !== space.id);
   return space;
 };
 
 const selectSpace = id => {
-  state.currentSpace = state.spaces.find(s => s.id === id) || null;
+  state.currentSpace = state.userSpaces.find(s => s.id === id) || null;
   return state.currentSpace;
 };
 
@@ -62,7 +62,7 @@ export function useSpaces() {
   const readonlyState = readonly(state);
   return {
     ...toRefs(readonlyState),
-    loadSpaces,
+    loadUserSpaces,
     loadSpaceUsers,
     createSpace,
     updateSpace,

src/views/dashboard/Dashboard.scss

@@ -1,16 +1,20 @@
 .dashboard-view {
   &__head {
     display: grid;
-    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
-    gap: $spacing-unit*2;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: $spacing-unit * 2;
   }
 
   &__main {
     display: flex;
     flex-direction: column;
-    margin: $spacing-unit*2 0;
+    margin: $spacing-unit * 2 0;
     padding: $spacing-unit;
     box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
     background-color: $color-white;
+
+    .recent-projects-list {
+      margin-top: $spacing-unit * 2;
+    }
   }
 }