Add bookmarking

assets/css/tailwind.css

@@ -11,6 +11,7 @@
   --color-secondary: #182b45;
   --color-tertiary: #0b3341;
   --color-accent: #0cc9ab;
+  --color-star: #f5c518;
 
   --color-black: #202121;
   --color-dark: #0f1a2c;

components/skill-tree/Node.vue

@@ -1,37 +1,25 @@
 <template>
-	<svg :x="cx" :y="cy" ref="nodeRef" @click="ondblclick">
-		<SkillTreeNodeSvg
-			v-if="isFilled"
-			:size="nodeSize"
-			:node="node"
-			:active="active"
-			:completed="completed"
-		/>
-
-		<foreignObject
-			v-if="zoomLevel != 1 && isFilled"
-			x="0"
-			:y="nodeSize - 10"
-			:width="nodeSize"
-			:height="active || completed ? 200 : 100"
-		>
-			<h6
-				class="origin-center select-none transition-all duration-500 ease-in-out text-center w-full h-auto pointer-events-none capitalize"
-				:class="{
-					'pt-6': active,
-					'pt-7': completed,
-					'pt-2': !active && !completed,
-					'text-heading-3': zoomLevel == 5,
-					'text-heading-4': zoomLevel == 4,
-					'text-heading-5': zoomLevel == 3,
-					'text-body-2': zoomLevel == 2,
-				}"
-				v-if="node && node.name != 'start'"
-			>
-				{{ node?.name ?? '' }}
-			</h6>
-		</foreignObject>
-	</svg>
+  <svg :x="cx" :y="cy" ref="nodeRef" @click="ondblclick">
+    <SkillTreeNodeSvg v-if="isFilled" :size="nodeSize" :node="node" :active="active" :completed="completed"
+      :isBookmarked="isNodeBookmarked" @bookmarked="toggleBookmark" />
+
+    <foreignObject v-if="zoomLevel != 1 && isFilled" x="0" :y="nodeSize - 10" :width="nodeSize"
+      :height="active || completed ? 200 : 100">
+      <h6
+        class="origin-center select-none transition-all duration-500 ease-in-out text-center w-full h-auto pointer-events-none capitalize"
+        :class="{
+          'pt-6': active,
+          'pt-7': completed,
+          'pt-2': !active && !completed,
+          'text-heading-3': zoomLevel == 5,
+          'text-heading-4': zoomLevel == 4,
+          'text-heading-5': zoomLevel == 3,
+          'text-body-2': zoomLevel == 2,
+        }" v-if="node && node.name != 'start'">
+        {{ node?.name ?? '' }}
+      </h6>
+    </foreignObject>
+  </svg>
 </template>
 
 <script lang="ts">
@@ -53,6 +41,9 @@ export default defineComponent({
   emits: ['node', 'size', 'selected', 'move', 'ref'],
   setup(props, { emit }) {
     let occupiedSpace = 3;
+    let isNodeBookmarked = ref(false);
+    const user = useUser();
+
 
     const size = computed(() => {
       switch (props.zoomLevel) {
@@ -84,13 +75,15 @@ export default defineComponent({
     const nodeRef = ref<SVGElement | null>(null);
 
     const current_node = computed(() => {
+      isNodeBookmarked.value = props.node?.is_bookmarked ?? false;
       return {
         id: props.node?.id ?? '',
         name: props.node?.name ?? '',
         dependencies: props.node?.dependencies ?? [],
         row: props.node?.row ?? props.row,
         column: props.node?.column ?? props.column,
         icon: props.node?.icon ?? '',
+        is_bookmarked: props.node?.is_bookmarked ?? false,
       };
     });
 
@@ -125,6 +118,35 @@ export default defineComponent({
       return !!current_node.value.id;
     });
 
+    async function toggleBookmark(isBookmarked: boolean) {
+      if(!user.value) return router.push('/auth/login');
+
+      isNodeBookmarked.value = isBookmarked;
+
+      try {
+        if (isBookmarked) {
+          await createBookmark(
+            props.node?.parent_id == null ? props.node?.id : props.node?.parent_id,
+            props.node?.parent_id == null ? "" : props.node?.id
+          );
+        } else {
+          await deleteBookmark(
+            props.node?.parent_id == null ? props.node?.id : props.node?.parent_id,
+            props.node?.parent_id == null ? "" : props.node?.id
+          );
+        }
+      } catch (error) {
+        isNodeBookmarked.value = !isBookmarked;
+        console.error(`Bookmark ${isBookmarked ? 'creation' : 'deletion'} failed!`);
+      }
+    }
+
+    onMounted(async () => {
+      await Promise.all([
+        getUser(),
+      ]);
+    });
+
     return {
       current_node,
       nodeRef,
@@ -135,9 +157,9 @@ export default defineComponent({
       ondblclick,
       isFilled,
       occupiedSpace,
+      toggleBookmark,
+      isNodeBookmarked
     };
   },
 });
 </script>
-
-<style scoped></style>

components/svg/Star.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" class="scale-75 origin-center"
+      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
+      clip-rule="evenodd" />
+  </svg>
+</template>

components/svg/StarOutline.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+    class="size-6">
+    <path class="scale-75 origin-center" stroke-linecap="round" stroke-linejoin="round"
+      d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+  </svg>
+</template>

composables/bookmark.ts

@@ -0,0 +1,39 @@
+export async function createBookmark(
+  rootSkillId: string,
+  subSkillId: string | null = null
+): Promise<void> {
+  try {
+    var urlPath = `/skills/bookmark/${rootSkillId}/${
+      subSkillId != null ? subSkillId : ""
+    }`;
+
+    const response = await POST(urlPath);
+
+    if (!response) throw new Error("Failed to create bookmark");
+
+    console.log("Bookmark created");
+  } catch (error) {
+    console.error("Error creating bookmark", error);
+    throw error;
+  }
+}
+
+export async function deleteBookmark(
+  rootSkillId: string,
+  subSkillId: string | null = null
+): Promise<void> {
+  try {
+    var urlPath = `/skills/bookmark/${rootSkillId}/${
+      subSkillId != null ? subSkillId : ""
+    }`;
+
+    const response = await DELETE(urlPath);
+
+    if (!response || response !== true) throw new Error("Failed to delete bookmark");
+
+    console.log("Bookmark deleted");
+  } catch (error) {
+    console.error("Error deleting bookmark", error);
+    throw error;
+  }
+}

pages/skill-tree/[id]/[skill].vue

@@ -20,13 +20,16 @@
       :activeStepper="activeStepper"
       @activeStepper="activeStepper = $event"
     />
-    <div class="h-fit pointer-events-none">
+    <div class="h-fit">
       <SkillTreeNodeSvg
         :size="nodeSize"
         :node="subSkill"
         :active="true"
         :completed="subSkill?.completed ?? false"
         class="mx-auto"
+        :navigate="false"
+        :isBookmarked="isNodeBookmarked"
+        @bookmarked="toggleBookmark"
       />
       <h6
         class="text-heading-4 lg:text-heading-3 xl:text-heading-2 text-center mt-card-sm"
@@ -52,7 +55,6 @@
 import { defineComponent } from "vue";
 import type { Ref } from "vue";
 import { useI18n } from "vue-i18n";
-import type { Quiz } from "~/types/courseTypes";
 import { getQuizzesInSkill, useQuizzes } from "~~/composables/quizzes";
 definePageMeta({
   middleware: ["auth"],
@@ -69,6 +71,8 @@ export default defineComponent({
 
     const subSkillTree: Ref<any> = useSubSkillTree();
 
+    const isNodeBookmarked = ref(false);
+
     const courses = useCourses();
     const coachings = useCoachings();
     const webinars = useWebinars();
@@ -93,7 +97,9 @@ export default defineComponent({
 
     const subSkill = computed(() => {
       let skills: any[] = subSkillTree.value?.skills ?? [];
-      return skills.find((skill) => skill.id == subSkillID.value);
+      let sub_skill = skills.find((skill) => skill.id == subSkillID.value);
+      isNodeBookmarked.value = sub_skill?.is_bookmarked ?? false;
+      return sub_skill;
     });
 
     const courseIDs = computed(() => {
@@ -136,6 +142,23 @@ export default defineComponent({
 
     const nodeSize = ref(150);
 
+    async function toggleBookmark(isBookmarked: boolean) {
+      isNodeBookmarked.value = isBookmarked;
+
+      try {
+        if (isBookmarked) {
+          await createBookmark(subSkill.value.parent_id, subSkill.value.id);
+        } else {
+          await deleteBookmark(subSkill.value.parent_id, subSkill.value.id);
+        }
+
+        isNodeBookmarked.value = isBookmarked;
+      } catch (error) {
+        isNodeBookmarked.value = !isBookmarked;
+        console.error(`Bookmark ${isBookmarked ? "creation" : "deletion"} failed!`);
+      }
+    }
+
     onMounted(async () => {
       if (window) {
         updateWindowWidth();
@@ -159,8 +182,6 @@ export default defineComponent({
       loading.value = false;
     });
 
-
-
     onUnmounted(() => {
       if (window) {
         window.removeEventListener("resize", updateWindowWidth);
@@ -182,9 +203,9 @@ export default defineComponent({
       skillName,
       breadcrumbs,
       quizzes,
+      toggleBookmark,
+      isNodeBookmarked
     };
   },
 });
 </script>
-
-<style scoped></style>

tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
       secondary: 'var(--color-secondary)',
       tertiary: 'var(--color-tertiary)',
       accent: 'var(--color-accent)',
+      star: 'var(--color-star)',
 
       black: 'var(--color-black)',
       dark: 'var(--color-dark)',