Feature/guided tour

package.json

@@ -10,7 +10,7 @@
     "test:e2e": "start-server-and-test 'npm run dev -- --port 3030' 3030 'cypress open'"
   },
   "dependencies": {
-    "@bimdata/design-system": "1.2.0",
+    "@bimdata/design-system": "1.3.1-rc.1",
     "@bimdata/typescript-fetch-api-client": "7.4.2",
     "@bimdata/viewer": "^1.9.0-rc.85",
     "async": "^3.2.3",

src/AppLayout.vue

@@ -1,8 +1,20 @@
 <template>
   <div class="app-layout">
+    <template v-if="tourToDisplay">
+      <BIMDataGuidedTour
+        :tours="tours"
+        :tourToDisplay="tourToDisplay"
+        :elementToObserve="appLayoutViewContainer"
+        @set-completed-tour="setTourCompleted($event)"
+      />
+    </template>
     <AppNotification />
     <AppHeader />
-    <div class="app-layout__view-container" :class="{ loading }">
+    <div
+      ref="appLayoutViewContainer"
+      class="app-layout__view-container"
+      :class="{ loading }"
+    >
       <router-view></router-view>
     </div>
     <transition name="fade">
@@ -14,10 +26,14 @@
 </template>
 
 <script>
+import { ref, onMounted } from "vue";
 import { contexts, useLoadingContext } from "@/composables/loading.js";
 // Components
 import AppHeader from "@/components/specific/app/app-header/AppHeader.vue";
 import AppNotification from "@/components/specific/app/app-notification/AppNotification.vue";
+import { useUser } from "@/state/user.js";
+import { tours } from "./config/guidedTour/tours.js";
+import { TOURS_NAME } from "@/config/guidedTour/tours.js";
 
 export default {
   components: {
@@ -26,9 +42,27 @@ export default {
   },
   setup() {
     const loading = useLoadingContext(contexts.viewContainer);
+    const appLayoutViewContainer = ref(null);
+    const { loadGuidedTours, setTourCompleted } = useUser();
+    const tourToDisplay = ref(null);
+
+    onMounted(async () => {
+      const guidedTours = await loadGuidedTours();
+      const platformIntro = guidedTours.find(
+        tour => tour.name === TOURS_NAME.PLATFORM_INTRO
+      );
+
+      if (!platformIntro) {
+        tourToDisplay.value = TOURS_NAME.PLATFORM_INTRO;
+      }
+    });
 
     return {
-      loading
+      tours,
+      loading,
+      tourToDisplay,
+      appLayoutViewContainer,
+      setTourCompleted
     };
   }
 };

src/components/specific/dashboard/dashboard-space-list/DashboardSpaceList.vue

@@ -9,6 +9,7 @@
     >
       <SpaceCard
         v-for="space in displayedSpaces"
+        data-guide="dashboard-space"
         :key="space.id"
         :space="space"
         :actionMenu="false"

src/components/specific/files/files-manager/FilesManager.vue

@@ -4,13 +4,15 @@
       <template v-if="fileStructure.children.length > 0">
         <div class="files-manager__actions">
           <FolderCreationButton
+            data-guide="btn-new-folder"
             :disabled="!project.isAdmin && currentFolder.userPermission < 100"
             class="files-manager__actions__btn-new-folder"
             width="194px"
             :project="project"
             :folder="currentFolder"
           />
           <BIMDataTooltip
+            data-guide="btn-upload-file"
             class="files-manager__actions__btn-new-file"
             color="high"
             :disabled="
@@ -69,6 +71,7 @@
           </BIMDataTooltip>
         </div>
         <FileTree
+          data-guide="file-tree"
           class="files-manager__tree"
           :project="project"
           :fileStructure="fileStructure"

src/components/specific/models/models-card/ModelsCard.vue

@@ -18,7 +18,11 @@
       </AppLink>
     </template>
     <template #content>
-      <ModelsCardModelPreview :models="models" @model-changed="onModelChange" />
+      <ModelsCardModelPreview
+        data-guide="preview-ifc"
+        :models="models"
+        @model-changed="onModelChange"
+      />
     </template>
   </BIMDataCard>
 </template>

src/components/specific/projects/project-card/ProjectCard.vue

@@ -7,6 +7,8 @@
   >
     <template #front-face>
       <AppLink
+        data-guide="dashboard-project"
+        :data-guide-click="project.isAdmin ? 'dashboard-project' : ''"
         :to="{
           name: routeNames.projectBoard,
           params: {

src/components/specific/projects/project-creation-card/ProjectCreationCard.vue

@@ -47,6 +47,7 @@
 
       <div
         v-else
+        data-guide="btn-create-project"
         data-test="btn-open-create"
         class="project-creation-card__btn-open"
         @click="openCreationForm"

src/config/guidedTour/platform/IntroOutroPlatform.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="specific-component intro-platform">
+    <div class="intro-platform__title">
+      {{ title }}
+    </div>
+    <span class="intro-platform__content">
+      {{ content }}
+    </span>
+    <img :src="img" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String
+    },
+    content: {
+      type: String
+    },
+    img: {
+      type: String
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.intro-platform {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  gap: 12px;
+  &__content {
+    text-align: center;
+  }
+  &__title {
+    font-size: calc(var(--spacing-unit) * 2);
+    font-weight: bold;
+  }
+}
+</style>

src/config/guidedTour/tours.js

@@ -0,0 +1,153 @@
+import i18n from "../../i18n/index.js";
+import IntroOutroPlatform from "./platform/IntroOutroPlatform.vue";
+
+const { t } = i18n.global;
+const imgPath = "/static/guidedTour/platform/";
+
+const TOURS_NAME = Object.freeze({
+  PLATFORM_INTRO: "PLATFORM_INTRO"
+});
+
+const tours = [
+  {
+    name: TOURS_NAME.PLATFORM_INTRO,
+    steps: [
+      {
+        props: {
+          title: t("GuidedTour.platform.intro.title"),
+          content: t("GuidedTour.platform.intro.content"),
+          img: imgPath + "intro.png"
+        },
+        layout: IntroOutroPlatform
+      },
+      {
+        name: "actionButtons",
+        target: ["btn-spaces", "btn-projects", "btn-subscriptions"],
+        props: {
+          title: t("GuidedTour.platform.actionButtons.title"),
+          content: t("GuidedTour.platform.actionButtons.content"),
+          img: imgPath + "actionButtons.gif",
+          imgPosition: "96% 50%", // horizontal vertical
+          imgSize: "200%"
+        }
+      },
+      {
+        name: "firstSpace",
+        target: "dashboard-space",
+        props: {
+          title: t("GuidedTour.platform.firstSpace.title"),
+          content: t("GuidedTour.platform.firstSpace.content"),
+          img: imgPath + "firstSpace.gif",
+          imgPosition: "-13% 48%",
+          imgSize: "150%"
+        }
+      },
+      {
+        name: "firstProject",
+        clickable: true,
+        target: "dashboard-project",
+        targetToClick: "dashboard-project",
+        props: {
+          title: t("GuidedTour.platform.firstProject.title"),
+          content: t("GuidedTour.platform.firstProject.content"),
+          img: imgPath + "firstProject.gif",
+          imgPosition: "49% 50%",
+          imgSize: "77%"
+        }
+      },
+      {
+        name: "modelsOverview",
+        target: "preview-ifc",
+        props: {
+          title: t("GuidedTour.platform.previewIfc.title"),
+          content: t("GuidedTour.platform.previewIfc.content"),
+          img: imgPath + "modelsOverview.gif",
+          imgPosition: "72% 50%",
+          imgSize: "233%"
+        }
+      },
+      {
+        name: "usersManager",
+        target: "users-manager",
+        props: {
+          title: t("GuidedTour.platform.usersManager.title"),
+          content: t("GuidedTour.platform.usersManager.content"),
+          img: imgPath + "usersManager.gif",
+          imgPosition: "126% 108%",
+          imgSize: "98%"
+        }
+      },
+      {
+        name: "modelsManager",
+        target: "models-manager",
+        props: {
+          title: t("GuidedTour.platform.modelsManager.title"),
+          content: t("GuidedTour.platform.modelsManager.content"),
+          img: imgPath + "modelsManager.gif",
+          imgPosition: "74% 38%",
+          imgSize: "105%"
+        }
+      },
+      {
+        name: "gedButton",
+        clickable: true,
+        target: "project-tabs",
+        targetDetail: "> ul > li:nth-child(2)",
+        props: {
+          title: t("GuidedTour.platform.gedButton.title"),
+          content: t("GuidedTour.platform.gedButton.content"),
+          img: imgPath + "gedButton.gif",
+          imgPosition: "-5% 54%",
+          imgSize: "300%"
+        }
+      },
+      {
+        name: "fileTree",
+        target: ["btn-new-folder", "btn-upload-file", "file-tree"],
+        props: {
+          title: t("GuidedTour.platform.fileTree.title"),
+          content: t("GuidedTour.platform.fileTree.content"),
+          img: imgPath + "fileTree.gif",
+          imgPosition: "-16% 62%",
+          imgSize: "167%"
+        }
+      },
+      {
+        name: "groupManager",
+        target: "btn-manage-groups",
+        props: {
+          title: t("GuidedTour.platform.groupManager.title"),
+          content: t("GuidedTour.platform.groupManager.content"),
+          img: imgPath + "groupManager.gif",
+          imgPosition: "45% -18%",
+          imgSize: "96%"
+        }
+      },
+      {
+        name: "changeSpace",
+        clickable: true,
+        spotlightOffset: false,
+        target: "btn-change-space",
+        targetDetail: "> .breadcrumb-selector > div > div",
+        props: {
+          title: t("GuidedTour.platform.changeSpace.title"),
+          content: t("GuidedTour.platform.changeSpace.content"),
+          img: imgPath + "changeSpace.gif",
+          imgPosition: "-10% 77%",
+          imgSize: "210%"
+        }
+      },
+      {
+        name: "outro",
+        target: "btn-create-project",
+        props: {
+          title: t("GuidedTour.platform.outro.title"),
+          content: t("GuidedTour.platform.outro.content"),
+          img: imgPath + "outro.png"
+        },
+        layout: IntroOutroPlatform
+      }
+    ]
+  }
+];
+export { tours, TOURS_NAME };

src/i18n/lang/fr.json

@@ -469,6 +469,58 @@
       "readWrite": "Lecture / Écriture"
     }
   },
+  "GuidedTour": {
+    "platform": {
+      "intro": {
+        "title": "Bienvenue",
+        "content": "Explorons ensemble les fonctionnalités !"
+      },
+      "actionButtons": {
+        "title": "Raccourcis",
+        "content": "Accédez à l’ensemble de vos espaces, projets et abonnements directement depuis les raccourcis"
+      },
+      "firstSpace": {
+        "title": "Dashboard",
+        "content": "Accédez à vos espaces et projets récents depuis le dashboard"
+      },
+      "firstProject": {
+        "title": "Dashboard",
+        "content": "Accédez à vos espaces et projets récents depuis le dashboard"
+      },
+      "previewIfc": {
+        "title": "Aperçu",
+        "content": "Naviguez parmis les aperçus de vos modèles et renseignez leur position"
+      },    
+      "usersManager": {
+        "title": "Collaboration",
+        "content": "Invitez vos collaborateurs aux projets"
+      },
+      "modelsManager": {
+        "title": "Modèles",
+        "content": "Téléversez vos modèles (IFC, DWG, PDF...) pour commencer à bimer"
+      },
+      "gedButton": {
+        "title": "Modèles",
+        "content": "Téléversez vos modèles (IFC, DWG, PDF...) pour commencer à bimer"
+      },
+      "fileTree": {
+        "title": "Vos dossiers",
+        "content": "Créez et téléversez vos dossiers et fichiers pour faciliter la gestion de projets"
+      },
+      "groupManager": {
+        "title": "Gestion des droits",
+        "content": "Gérez vos dossiers, les droits d’accès et plus encore"
+      },
+      "changeSpace": {
+        "title": "Gestion des droits",
+        "content": "Gérez vos dossiers, les droits d’accès et plus encore"
+      },
+      "outro": {
+        "title": "Bravo !",
+        "content": "Bravo ! Vous êtes arrivé au bout de ce tutoriel ! Maintenant, il ne vous reste plus qu’à lancer votre premier projet"
+      }
+    }
+  },
   "InvitationCard": {
     "pendingMessage": "Invité - Sans réponse.",
     "resendLinkText": "Renvoyer l'invitation ?",