Merge pull request #243 from avantifellows/analyse_and_touchscreen

Analyse and touchscreen

src/assets/locales/en.js

@@ -113,6 +113,7 @@ export default {
           play: "Play",
           edit: "Edit",
           duplicate: "Duplicate",
+          analyse: "Analyse",
         },
       },
       search: {

src/assets/locales/hi.js

@@ -113,6 +113,7 @@ export default {
           play: "चलाओ",
           edit: "संपादन",
           duplicate: "नक़ल",
+          analyse: "विश्लेषण",
         },
       },
       search: {

src/components/Collections/ListItems/PlioListItem.vue

@@ -24,11 +24,7 @@
 
       <!-- plio link -->
       <div>
-        <URL
-          :link="plioLink"
-          :urlStyleClass="urlStyleClass"
-          :urlCopyButtonClass="urlCopyButtonClass"
-        ></URL>
+        <URL :link="plioLink" :urlCopyButtonClass="urlCopyButtonClass"></URL>
       </div>
 
       <!-- action buttons -->
@@ -60,6 +56,16 @@
           @click="duplicateThenRoute"
           v-tooltip="duplicateButtonTooltip"
         ></icon-button>
+
+        <!-- analyse button -->
+        <icon-button
+          v-if="isTouchDevice"
+          :titleConfig="analyseButtonTitleConfig"
+          :buttonClass="analyseButtonClass"
+          :isDisabled="!isPublished"
+          @click="analysePlio"
+          v-tooltip="analyseButtonTooltip"
+        ></icon-button>
       </div>
     </div>
   </div>
@@ -69,6 +75,7 @@
 import PlioAPIService from "@/services/API/Plio.js";
 import ItemAPIService from "@/services/API/Item.js";
 import QuestionAPIService from "@/services/API/Question.js";
+import Utilities from "@/services/Functional/Utilities.js";
 import URL from "@/components/UI/Text/URL.vue";
 import IconButton from "@/components/UI/Buttons/IconButton.vue";
 import SimpleBadge from "@/components/UI/Badges/SimpleBadge.vue";
@@ -116,7 +123,8 @@ export default {
       },
       duplicateButtonClass:
         "bg-gray-100 hover:bg-gray-200 rounded-md shadow-md h-10 ring-primary",
-      urlStyleClass: "text-sm font-bold text-yellow-600",
+      analyseButtonClass:
+        "bg-gray-100 hover:bg-gray-200 rounded-md shadow-md h-10 ring-primary",
       urlCopyButtonClass: "text-yellow-600",
     };
   },
@@ -130,6 +138,10 @@ export default {
     ...mapState("auth", ["activeWorkspace"]),
     ...mapState("sync", ["pending"]),
     ...mapState("plioItems", ["allPlioDetails"]),
+    isTouchDevice() {
+      // detects if the user's device has a touch screen or not
+      return window.matchMedia("(any-pointer: coarse)").matches;
+    },
     statusBadge() {
       // text for the status badge
       if (this.status == undefined) return null;
@@ -139,21 +151,32 @@ export default {
       // title config for the play button
       return {
         value: this.$t("home.table.plio_list_item.buttons.play"),
-        class: "p-2 text-primary font-semibold",
+        class:
+          "p-2 text-sm bp-500:text-base text-primary font-medium bp-500:font-semibold",
       };
     },
     editButtonTitleConfig() {
       // title config for the play button
       return {
         value: this.$t("home.table.plio_list_item.buttons.edit"),
-        class: "p-2 text-primary font-semibold",
+        class:
+          "p-2 text-sm bp-500:text-base text-primary font-medium bp-500:font-semibold",
       };
     },
     duplicateButtonTitleConfig() {
       // title config for the duplicate button
       return {
         value: this.$t("home.table.plio_list_item.buttons.duplicate"),
-        class: "p-2 text-primary font-semibold",
+        class:
+          "p-2 text-sm bp-500:text-base text-primary font-medium bp-500:font-semibold",
+      };
+    },
+    analyseButtonTitleConfig() {
+      // title config for the analyse button
+      return {
+        value: this.$t("home.table.plio_list_item.buttons.analyse"),
+        class:
+          "p-2 text-sm bp-500:text-base text-primary font-medium bp-500:font-semibold",
       };
     },
     playButtonTooltip() {
@@ -171,6 +194,12 @@ export default {
       if (!this.status) return "";
       return this.$t("tooltip.home.table.plio_list_item.buttons.duplicate");
     },
+    analyseButtonTooltip() {
+      // tooltip for the analyse button
+      if (!this.isPublished)
+        return this.$t(`tooltip.home.table.buttons.analyse_plio.disabled`);
+      return this.$t(`tooltip.home.table.buttons.analyse_plio.enabled`);
+    },
     isPublished() {
       // whether the plio was published
       return this.status == "published";
@@ -207,12 +236,7 @@ export default {
     },
     plioLink() {
       // prepare the link for the plio from the plio ID
-      if (this.plioId == "") {
-        return "";
-      }
-      var baseURL = process.env.VUE_APP_FRONTEND + "/#";
-      if (this.activeWorkspace != "") baseURL += "/" + this.activeWorkspace;
-      return baseURL + "/play/" + this.plioId;
+      return Utilities.getPlioLink(this.plioId, this.activeWorkspace);
     },
     isUntitled() {
       // if the plio is untitled or not
@@ -286,6 +310,14 @@ export default {
         });
       });
     },
+
+    analysePlio() {
+      // redirects to the dashboard page for the selected plio
+      this.$router.push({
+        name: "Dashboard",
+        params: { plioId: this.plioId, org: this.activeWorkspace },
+      });
+    },
   },
   emits: ["fetched"],
 };

src/components/Collections/Table/Table.vue

@@ -4,8 +4,8 @@
     <div class="flex flex-col xsm:flex-row justify-between pt-4">
       <!-- table title -->
       <div :class="tableTitleClass">
-        <p>{{ tableTitle }}</p>
-        <p v-if="!pending">({{ totalItemsInTable }})</p>
+        <p class="whitespace-nowrap">{{ tableTitle }}</p>
+        <p v-if="!pending">({{ totalNumberOfPlios }})</p>
         <inline-svg
           v-if="pending"
           :src="require('@/assets/images/spinner-solid.svg')"
@@ -93,7 +93,6 @@
                   :class="tableRowClass"
                   @mouseover="tableRowHoverOn(rowIndex)"
                   @mouseout="tableRowHoverOff"
-                  @touchstart="tableRowTouchOn(rowIndex)"
                 >
                   <td
                     v-for="(columnName, columnIndex) in columns"
@@ -178,6 +177,11 @@ export default {
       default: "",
       type: String,
     },
+    totalNumberOfPlios: {
+      // total number of plios for the user
+      default: 0,
+      type: Number,
+    },
   },
   components: {
     PlioListItem,
@@ -218,6 +222,10 @@ export default {
 
   computed: {
     ...mapState("sync", ["pending"]),
+    isTouchDevice() {
+      // detects if the user's device has a touchscreen or not
+      return window.matchMedia("(any-pointer: coarse)").matches;
+    },
     isSearchStringPresent() {
       // if a string is present in the search bar
       return this.searchString != "";
@@ -238,7 +246,7 @@ export default {
     },
     tableRowClass() {
       // class for each row of the table
-      return "hover:bg-gray-100 hover:cursor-pointer active:bg-gray-100";
+      return [{ "hover:bg-gray-100": !this.isTouchDevice }, "hover:cursor-pointer"];
     },
     searchPlaceholder() {
       // placeholder for the search box

src/components/UI/Text/URL.vue

@@ -37,7 +37,8 @@ export default {
       type: Boolean,
     },
     urlStyleClass: {
-      default: "text-sm sm:text-md lg:text-lg h-full text-yellow-600 font-bold",
+      default:
+        "text-xs bp-500:text-sm sm:text-md lg:text-lg h-full text-yellow-600 font-bold",
       type: [String, Object],
     },
     urlCopyButtonClass: {

src/pages/Dashboard.vue

@@ -187,6 +187,7 @@
 <script>
 import PlioAPIService from "@/services/API/Plio.js";
 import VideoFunctionalService from "@/services/Functional/Video.js";
+import Utilities from "@/services/Functional/Utilities.js";
 import URL from "@/components/UI/Text/URL";
 import IconButton from "@/components/UI/Buttons/IconButton";
 import { mapActions, mapState } from "vuex";
@@ -296,13 +297,8 @@ export default {
       return "bg-primary hover:bg-primary-hover rounded-lg ring-primary px-2 w-full bp-420:w-60";
     },
     plioLink() {
-      // get the link for the plio from the plio ID
-      if (this.plioId == "") {
-        return "";
-      }
-      var baseURL = process.env.VUE_APP_FRONTEND + "/#";
-      if (this.org != "") baseURL += "/" + this.org;
-      return baseURL + "/play/" + this.plioId;
+      // prepare the link for the plio from the plio ID
+      return Utilities.getPlioLink(this.plioId, this.org);
     },
     videoThumbnailURL() {
       // link to the thumbnail for the video linked to the plio

src/pages/Editor.vue

@@ -161,6 +161,7 @@ import ItemAPIService from "@/services/API/Item.js";
 import QuestionAPIService from "@/services/API/Question.js";
 import VideoFunctionalService from "@/services/Functional/Video.js";
 import ItemFunctionalService from "@/services/Functional/Item.js";
+import Utilities from "@/services/Functional/Utilities.js";
 import IconButton from "@/components/UI/Buttons/IconButton.vue";
 import SimpleBadge from "@/components/UI/Badges/SimpleBadge.vue";
 import DialogBox from "@/components/UI/Alert/DialogBox";
@@ -455,12 +456,7 @@ export default {
     },
     plioLink() {
       // prepare the link for the plio from the plio ID
-      if (this.plioId == "") {
-        return "";
-      }
-      var baseURL = process.env.VUE_APP_FRONTEND + "/#";
-      if (this.org != "") baseURL += "/" + this.org;
-      return baseURL + "/play/" + this.plioId;
+      return Utilities.getPlioLink(this.plioId, this.org);
     },
     isVideoIdValid() {
       // whether the video Id is valid

src/pages/Home.vue

@@ -21,6 +21,7 @@
         :data="tableData"
         :columns="tableColumns"
         :tableTitle="tableTitle"
+        :totalNumberOfPlios="totalNumberOfPlios"
         @search-plios="fetchPlioIds($event)"
         @reset-search-string="resetSearchString"
       >

src/services/Functional/Utilities.js

@@ -0,0 +1,11 @@
+export default {
+  getPlioLink(plioId, activeWorkspace) {
+    // prepare the link for the plio from the plio ID and activeWorkspace
+    if (plioId == "") return "";
+    var baseURL = process.env.VUE_APP_FRONTEND + "/#";
+    baseURL = baseURL.replace("http://", "");
+    baseURL = baseURL.replace("https://", "");
+    if (activeWorkspace != "") baseURL += "/" + activeWorkspace;
+    return baseURL + "/play/" + plioId;
+  },
+};