Merge pull request #158 from BBMRI-ERIC/feat/vue_tour

add vue tour

package.json

@@ -32,6 +32,7 @@
     "vue-matomo": "^4.2.0",
     "vue-router": "^4.1.5",
     "vue3-form-wizard": "^0.1.8",
+    "vue3-tour": "^0.3.4",
     "vuex": "^4.0.2",
     "vuex-oidc": "^4.0.2",
     "vuex-router-sync": "^5.0.0",

src/App.vue

@@ -1,4 +1,10 @@
 <template>
+  <v-tour
+    v-show="$route.path !== '/' && vueTourFeatureFlag"
+    name="myTour"
+    :steps="steps"
+  />
+
   <header>
     <navigation-bar />
   </header>
@@ -30,7 +36,10 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-12">
+      <div
+        id="v-step-0"
+        class="col-12"
+      >
         <router-view :key="$route.path" />
       </div>
     </div>
@@ -48,6 +57,7 @@
 <script>
 import { RouterView } from "vue-router"
 import { mapGetters, mapMutations } from "vuex"
+import allFeatureFlags from "@/config/featureFlags.js"
 
 import NavigationBar from "./components/NavigationBar.vue"
 import Footer from "./components/Footer.vue"
@@ -58,6 +68,51 @@ export default {
     NavigationBar,
     Footer
   },
+  data () {
+    return {
+      vueTourFeatureFlag: allFeatureFlags.vueTour,
+      steps: [
+        {
+          target: "#v-step-0", // We're using document.querySelector() under the hood
+          header: {
+            title: "Welcome"
+          },
+          content: "In the <strong>Negotiator</strong>, you can view the status of your negotiations and stay in contact with the providers of the desired resources."
+        },
+        {
+          target: "#v-step-1",
+          header: {
+            title: "Selection of the view."
+          },
+          content: "You can present your enquiries in a compact table or an informative card layout."
+        },
+        {
+          target: "#v-step-2",
+          header: {
+            title: "Status"
+          },
+          content: "You can see the current status of your enquiry at a glance."
+        },
+        {
+          target: "#v-step-3",
+          header: {
+            title: "Filter"
+          },
+          content: "You also have the option of sorting and filtering your negotiations.",
+          before: type => new Promise((resolve, reject) => {
+            localStorage.setItem("show_vue_tour_1", true)
+            resolve("foo")
+          })
+        }
+      ]
+    }
+  },
+  mounted: function () {
+    // Do not display after the first visit so that returning users are not annoyed!
+    if (!localStorage.getItem("show_vue_tour_1")) {
+      this.$tours.myTour.start()
+    }
+  },
   computed: {
     ...mapGetters({ notification: "getNotification" })
   },

src/components/NegotiationList.vue

@@ -9,7 +9,10 @@
     >
       <div class="row mb-2">
         <div class="d-flex flex-row flex-wrap">
-          <div class="dropdown b-dropdown mb-2 mx-2 filter-dropdown position-static btn-group d-flex justify-content-start">
+          <div
+            id="v-step-3"
+            class="dropdown b-dropdown mb-2 mx-2 filter-dropdown position-static btn-group d-flex justify-content-start"
+          >
             <button
               id="dropdownSortingButton"
               aria-haspopup="true"
@@ -239,6 +242,7 @@
           </button>
 
           <button
+            id="v-step-1"
             type="button"
             class="btn btn-sm"
             :class="savedNegotiationsView === 'Table' ? 'btn-display-view-button-color' : 'bg-body'"
@@ -288,7 +292,10 @@
                 <th scope="col">
                   Author
                 </th>
-                <th scope="col">
+                <th
+                  id="v-step-2"
+                  scope="col"
+                >
                   Status
                 </th>
                 <th scope="col" />

src/config/featureFlags.js

@@ -1,9 +1,11 @@
 const devSettings = {
-  faqPage: false
+  faqPage: false,
+  vueTour: false
 }
 
 const prodSettings = {
-  faqPage: false
+  faqPage: false,
+  vueTour: false
 }
 
 let allFeatureFlags

src/main.js

@@ -13,6 +13,8 @@ import "bootstrap"
 import "bootstrap-icons/font/bootstrap-icons.css"
 import matomo from "./config/matomo.js"
 import activeTheme from "./config/theme.js"
+import Vue3Tour from "vue3-tour"
+import "vue3-tour/dist/vue3-tour.css"
 
 library.add(faSpinner)
 library.add(faPencil)
@@ -26,6 +28,7 @@ const app = createApp(App).use(VueMatomo, {
 
 app.use(router)
 app.use(store)
+app.use(Vue3Tour)
 
 app.component("FontAwesomeIcon", FontAwesomeIcon)
 

yarn.lock

@@ -5171,6 +5171,11 @@ jspdf@^2.5.1:
     dompurify "^2.2.0"
     html2canvas "^1.0.0-rc.5"
 
+jump.js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/jump.js/-/jump.js-1.0.2.tgz#e0641b47f40a38f2139c25fda0500bf28e43015a"
+  integrity sha512-oUkJJ/Y4ATU5qjkXBntCZSKctbSyS3ewe2jrLaUu/cc9jsQiAn0fnTUxQnZz3mJdDdem1Q279zrD6h3n+Cgxtg==
+
 jwt-decode@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
@@ -7676,7 +7681,17 @@ vue3-form-wizard@^0.1.8:
   resolved "https://registry.yarnpkg.com/vue3-form-wizard/-/vue3-form-wizard-0.1.9.tgz#17b6c113e6e3253aae543825777eec946c7685c8"
   integrity sha512-XTNjolQ/1gc2PTt/XXW11Ut6C6PIT8JLYzB6iSGVXPNFXRhes9LDgRQAfLjQwJ+XswiNIsHqfwVnVTPAfTZJ3w==
 
-vue@^3.2.47:
+vue3-tour@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/vue3-tour/-/vue3-tour-0.3.4.tgz#af20b92318eaeda3dabfe9f60d951b47916c54ac"
+  integrity sha512-Z9U5NQ4pkR4xPwwPTVEpGIqyroIKBULBzfqEj9RuKT5Sx+5rC4X7B8XEKc3Cf9Lb9PPCX7lbxDSrWq7O2dICog==
+  dependencies:
+    "@popperjs/core" "^2.11.6"
+    hash-sum "^2.0.0"
+    jump.js "^1.0.2"
+    vue "^3.2.37"
+
+vue@^3.2.37, vue@^3.2.47:
   version "3.4.21"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.21.tgz#69ec30e267d358ee3a0ce16612ba89e00aaeb731"
   integrity sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==