handle bookmarking in lesson resource selection KCards

Author: nucleogenesis

kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue

@@ -17,6 +17,8 @@
         :contentNode="content"
         :thumbnailSrc="content.thumbnail"
         :headingLevel="cardsHeadingLevel"
+        :isBookmarked="isBookmarked(content.id)"
+        @toggleBookmark="toggleBookmark"
       >
         <template #belowTitle>
           <p v-if="contentCardMessage(content)">{{ contentCardMessage(content) }}</p>
@@ -71,6 +73,11 @@
 
 <script>
 
+  import { computed, ref } from 'vue';
+  import urls from 'kolibri/urls';
+  import client from 'kolibri/client';
+  import useUser from 'kolibri/composables/useUser';
+  import BookmarksResource from 'kolibri-common/apiResources/BookmarksResource';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import AccessibleFolderCard from 'kolibri-common/components/Cards/AccessibleFolderCard';
   import AccessibleResourceCard from 'kolibri-common/components/Cards/AccessibleResourceCard';
@@ -84,8 +91,67 @@
     },
     mixins: [commonCoreStrings],
     setup() {
+      // Map of contentnode_id to bookmark resource ID
+      const bookmarks = ref({});
+      // Map of contentNode IDs to bookmark resource IDs
+      const bookmarkedContentNodeIds = computed(() => Object.keys(bookmarks.value));
+      const { currentUserId } = useUser();
+
+      /**
+       * Fetch bookmarks and store them in the bookmarks ref mapping
+       * their contentnode_id to the bokomark's own ID.
+       * The contentnode_id is used for creating it, but we need the
+       * bookmark's ID to delete it.
+       */
+      function getBookmarks() {
+        BookmarksResource.fetchCollection({ force: true }).then(data => {
+          bookmarks.value = data.reduce((memo, bookmark) => {
+            memo[bookmark.contentnode_id] = bookmark.id;
+            return memo;
+          }, {});
+        });
+      }
+
+      function deleteBookmark(contentnode_id) {
+        client({
+          method: 'delete',
+          url: urls['kolibri:core:bookmarks_detail'](contentnode_id),
+        }).then(() => {
+          getBookmarks();
+        });
+      }
+
+      function addBookmark(contentnode_id) {
+        client({
+          method: 'post',
+          url: urls['kolibri:core:bookmarks_list'](),
+          data: {
+            contentnode_id: contentnode_id,
+            user: currentUserId.value,
+          },
+        }).then(() => {
+          getBookmarks();
+        });
+      }
+
+      function isBookmarked(contentnode_id) {
+        return bookmarkedContentNodeIds.value.includes(contentnode_id);
+      }
+
+      function toggleBookmark(contentnode_id) {
+        if (isBookmarked(contentnode_id)) {
+          const bookmarkId = bookmarks.value[contentnode_id];
+          deleteBookmark(bookmarkId);
+        } else {
+          addBookmark(contentnode_id);
+        }
+      }
+
+      getBookmarks();
       return {
         ViewMoreButtonStates,
+        toggleBookmark,
+        isBookmarked,
       };
     },
     props: {

packages/kolibri-common/components/Cards/AccessibleResourceCard.vue

@@ -34,7 +34,7 @@
           :color="$themePalette.grey.v_700"
           :ariaLabel="coreString('savedFromBookmarks')"
           :tooltip="coreString('savedFromBookmarks')"
-          @click.stop="isBookmarked = !isBookmarked"
+          @click.stop="$emit('toggleBookmark', contentNode.id)"
         />
       </div>
     </template>
@@ -58,7 +58,6 @@
     mixins: [commonCoreStrings],
     setup() {
       const { windowBreakpoint } = useKResponsiveWindow();
-
       return {
         windowBreakpoint,
       };
@@ -73,6 +72,10 @@
         type: Object,
         required: true,
       },
+      isBookmarked: {
+        type: Boolean,
+        default: false,
+      },
       headingLevel: {
         type: Number,
         required: true,
@@ -86,12 +89,6 @@
         default: 'centerInside',
       },
     },
-    data() {
-      return {
-        isBookmarked: false,
-      };
-    },
-    computed: {},
   };
 
 </script>