From 00e1d50850d02dc59ded3afb895275fd7b266f83 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Fri, 21 Feb 2025 15:02:40 -0800
Subject: [PATCH] WIP - updates to constants, MetadataChips component

---
 .../ContentCardList.vue                       |  35 +++-
 .../components/Cards/AccessibleFolderCard.vue |  38 ++--
 .../Cards/AccessibleResourceCard.vue          |  12 +-
 .../components/MetadataChips.vue              |  79 ++++++++
 .../composables/useCoachMetadataTags.js       |  81 ++++++--
 .../composables/useLearningActivities.js      | 190 ++++++++++++++++++
 packages/kolibri/constants.js                 |   3 +
 7 files changed, 392 insertions(+), 46 deletions(-)
 create mode 100644 packages/kolibri-common/components/MetadataChips.vue
 create mode 100644 packages/kolibri-common/composables/useLearningActivities.js

diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
index 3cc7fb52af..a7b30d2b14 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
@@ -1,14 +1,14 @@
 <template>
 
   <div class="content-list">
-      <KCheckbox
-        v-if="showSelectAll"
-        :label="$tr('selectAllCheckboxLabel')"
-        :checked="selectAllChecked"
-        :indeterminate="selectAllIndeterminate"
-        :disabled="isSelectAllDisabled"
-        @change="$emit('changeselectall', $event)"
-      />
+    <KCheckbox
+      v-if="showSelectAll"
+      :label="$tr('selectAllCheckboxLabel')"
+      :checked="selectAllChecked"
+      :indeterminate="selectAllIndeterminate"
+      :disabled="isSelectAllDisabled"
+      @change="$emit('changeselectall', $event)"
+    />
     <KCardGrid layout="1-1-1">
       <component
         :is="content.is_leaf ? 'AccessibleResourceCard' : 'AccessibleFolderCard'"
@@ -82,6 +82,7 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import AccessibleFolderCard from 'kolibri-common/components/Cards/AccessibleFolderCard';
   import AccessibleResourceCard from 'kolibri-common/components/Cards/AccessibleResourceCard';
+  import { useCoachMetadataTags } from 'kolibri-common/composables/useCoachMetadataTags';
   import { ViewMoreButtonStates } from '../../../constants/index';
 
   export default {
@@ -113,6 +114,10 @@
         });
       }
 
+      function getTags(content) {
+        return useCoachMetadataTags(content).tags.value;
+      }
+
       function deleteBookmark(contentnode_id) {
         client({
           method: 'delete',
@@ -150,6 +155,7 @@
 
       getBookmarks();
       return {
+        getTags,
         ViewMoreButtonStates,
         toggleBookmark,
         isBookmarked,
@@ -275,4 +281,17 @@
     margin-left: $checkbox-offset;
   }
 
+  .filter-chip {
+    display: inline-block;
+    font-size: 14px;
+    vertical-align: top;
+    border-radius: 0.25em;
+  }
+
+  .filter-chip-text {
+    display: inline-block;
+    margin: 4px 8px;
+    font-size: 11px;
+  }
+
 </style>
diff --git a/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue b/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue
index c44047594d..ad6de66357 100644
--- a/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue
@@ -4,11 +4,12 @@
     :to="to"
     :headingLevel="headingLevel"
     :orientation="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
-    thumbnailDisplay="large"
+    thumbnailDisplay="small"
     :title="contentNode.title"
     :thumbnailSrc="thumbnailSrc"
-    thumbnailScaleType="centerInside"
+    thumbnailScaleType="contain"
     thumbnailAlign="right"
+    :preserveFooter="true"
   >
     <template #thumbnailPlaceholder>
       <div class="default-folder-icon">
@@ -21,22 +22,7 @@
 
     <template #belowTitle>
       <slot name="belowTitle"></slot>
-      <div
-        class="header-bar"
-        :style="headerStyles"
-      >
-        <KIcon
-          icon="topic"
-          :color="$themePalette.grey.v_800"
-          class="folder-header-bar"
-        />
-        <p
-          class="folder-header-text"
-          :style="{ color: $themePalette.grey.v_700 }"
-        >
-          {{ coreString('folder') }}
-        </p>
-      </div>
+      <MetadataChips :tags="metadataTags" />
     </template>
   </KCard>
 
@@ -45,17 +31,26 @@
 
 <script>
 
+  import { toRefs } from 'vue';
   import { validateLinkObject } from 'kolibri/utils/validators';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { useCoachMetadataTags } from 'kolibri-common/composables/useCoachMetadataTags';
+  import MetadataChips from 'kolibri-common/components/MetadataChips';
 
   export default {
     name: 'AccessibleFolderCard',
+    components: {
+      MetadataChips,
+    },
     mixins: [commonCoreStrings],
-    setup() {
+    setup(props) {
+      const { contentNode } = toRefs(props);
       const { windowBreakpoint } = useKResponsiveWindow();
+      const { getFolderTags } = useCoachMetadataTags(contentNode.value);
 
       return {
+        metadataTags: getFolderTags(),
         windowBreakpoint,
       };
     },
@@ -84,8 +79,7 @@
           color: this.$themeTokens.text,
           borderRadius: '4px',
           height: '24px',
-          width: '74px',
-          margin: '0',
+          margin: '0em 1em',
           backgroundColor: this.$themePalette.grey.v_100,
         };
       },
@@ -97,7 +91,7 @@
 
 <style lang="scss" scoped>
 
-  .header-bar {
+  .chips-wrapper {
     display: flex;
     justify-content: space-between;
     height: 38px;
diff --git a/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue b/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
index 73cae654df..0a7d52f3b5 100644
--- a/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
+++ b/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
@@ -4,7 +4,7 @@
     :to="to"
     :headingLevel="headingLevel"
     :orientation="windowBreakpoint === 0 ? 'vertical' : 'horizontal'"
-    thumbnailDisplay="large"
+    thumbnailDisplay="small"
     :title="contentNode.title"
     :thumbnailSrc="thumbnailSrc"
     thumbnailAlign="right"
@@ -21,6 +21,7 @@
           :text="contentNode.description"
           :maxLines="2"
         />
+        <MetadataChips :tags="metadataTags" />
       </div>
     </template>
     <template #select>
@@ -45,20 +46,27 @@
 
 <script>
 
+  import { toRefs } from 'vue';
   import { validateLinkObject } from 'kolibri/utils/validators';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import MetadataChips from 'kolibri-common/components/MetadataChips';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { useCoachMetadataTags } from 'kolibri-common/composables/useCoachMetadataTags';
   import LearningActivityIcon from './../ResourceDisplayAndSearch/LearningActivityIcon.vue';
 
   export default {
     name: 'AccessibleResourceCard',
     components: {
       LearningActivityIcon,
+      MetadataChips,
     },
     mixins: [commonCoreStrings],
-    setup() {
+    setup(props) {
+      const { contentNode } = toRefs(props);
+      const { getResourceTags } = useCoachMetadataTags(contentNode.value);
       const { windowBreakpoint } = useKResponsiveWindow();
       return {
+        metadataTags: getResourceTags(),
         windowBreakpoint,
       };
     },
diff --git a/packages/kolibri-common/components/MetadataChips.vue b/packages/kolibri-common/components/MetadataChips.vue
new file mode 100644
index 0000000000..79474b3062
--- /dev/null
+++ b/packages/kolibri-common/components/MetadataChips.vue
@@ -0,0 +1,79 @@
+<template>
+
+  <div
+    class="metadata-chips"
+  >
+    <div
+      v-for="({ label, key, icon }) in tags"
+      :key="key"
+      :style="{ backgroundColor: $themePalette.grey.v_100 }"
+      class="chip"
+    >
+      <KIcon
+        v-if="icon"
+        class='icon'
+        :icon="icon"
+      />
+      <span
+        class="chip-text"
+        :style="{ color: $themePalette.grey.v_700 }"
+      >
+        {{ label }}
+      </span>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { toRefs } from 'vue';
+
+  export default {
+    name: 'MetadataChips',
+    props: {
+      /**
+       * A list of tags to display
+       * @type {Object[Tag]}
+       * @property {string} label
+       * @property {string} key
+       * @property {string} icon
+       */
+      tags: {
+        type: Array,
+        required: true,
+        validator: (tags) => tags.every(tag => tag.label && tag.key),
+      },
+    },
+  };
+
+</script>
+
+
+<style scoped lang="scss">
+
+  .metadata-chips {
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    border-radius: 4px;
+  }
+
+  .chip-text {
+    padding: 0 4px;
+    font-size: 12px;
+  }
+
+  .icon {
+    top: 0!important;
+  }
+
+  .chip {
+    display: flex;
+    position: relative;
+    padding: 4px;
+    margin-right: 4px;
+  }
+
+</style>
diff --git a/packages/kolibri-common/composables/useCoachMetadataTags.js b/packages/kolibri-common/composables/useCoachMetadataTags.js
index 76898c989b..d137b31868 100644
--- a/packages/kolibri-common/composables/useCoachMetadataTags.js
+++ b/packages/kolibri-common/composables/useCoachMetadataTags.js
@@ -1,36 +1,78 @@
 import { ref } from 'vue';
-import { ContentNodeKinds } from 'kolibri/constants';
+import useLearningActivities from 'kolibri-common/composables/useLearningActivities';
+import { ActivitiesLookup, ContentNodeKinds, LearningActivities } from 'kolibri/constants';
 import { coreString, coreStrings } from 'kolibri/uiText/commonCoreStrings';
 
+/**
+ * Create a tag Object
+ * @param {string} label - text to display
+ * @param {string} key - unique key for the tag - should map to le-utils constants
+ * @param {string} icon - icon to display (mapping to KIcon)
+ */
+function createTag(label, key, icon) {
+  return {
+    label,
+    key,
+    icon,
+  };
+}
+
 export function useCoachMetadataTags(contentNode) {
+  const { durationEstimation } = useLearningActivities(contentNode);
+
   const tags = ref([]);
 
+  function getKindTag() {
+    if (contentNode.kind === ContentNodeKinds.CHANNEL) {
+      return createTag(coreStrings.$tr('channel'), 'channel');
+    }
+    if (contentNode.kind === ContentNodeKinds.TOPIC) {
+      return createTag(coreStrings.$tr('folder'), 'folder', 'topic');
+    }
+  }
+
   const getCategoryTags = () => {
     if (!contentNode.categories) return [];
-    return contentNode.categories.map(category => coreString(category));
+    return contentNode.categories.map(category => createTag(coreString(category), category));
   };
 
   const getLevelTags = () => {
     if (!contentNode.grade_levels) return [];
-    return contentNode.grade_levels.map(grade_levels => coreString(grade_levels));
+    return contentNode.grade_levels.map(grade_levels =>
+      createTag(coreString(grade_levels), grade_levels),
+    );
   };
 
   const getLanguageTag = () => {
     if (!contentNode.lang) return [];
-    return contentNode.lang.lang_name;
+    return createTag(contentNode.lang.lang_name, contentNode.lang.id);
   };
 
-  const getActivityTag = () => {
+  const getActivityTags = () => {
     if (!contentNode.learning_activities) return [];
 
-    return contentNode.learning_activities.length > 1
-      ? [coreStrings.$tr('multipleLearningActivities')]
-      : contentNode.learning_activities.map(activity => coreString(activity));
+    if (contentNode.learning_activities.length > 1) {
+      return createTag(
+        coreStrings.$tr('multipleLearningActivities'),
+        'multipleLearningActivities',
+        'allActivities',
+      );
+    } else {
+      return contentNode.learning_activities.map(activity => {
+        let icon;
+        if (activity === LearningActivities.EXPLORE) {
+          icon = 'interactSolid';
+        } else {
+          icon = ActivitiesLookup[activity].toLowerCase() + 'Solid';
+        }
+        return createTag(coreString(activity), activity, icon);
+      });
+    }
   };
 
   const getDurationTag = () => {
     if (!contentNode.duration) return [];
-    return contentNode.duration.map(duration => coreStrings.formatDuration(duration));
+    return [createTag(durationEstimation.value, contentNode.duration)];
   };
 
   const getSpecificCategoryTag = () => {
@@ -38,7 +80,15 @@ export function useCoachMetadataTags(contentNode) {
     const specificCategories = contentNode.categories.filter(
       category => category.split('.').length > 2,
     );
-    return specificCategories.map(category => coreString(category));
+    return specificCategories.map(category => createTag(coreString(category), category));
+  };
+
+  const getFolderTags = () => {
+    return [getKindTag()];
+  };
+
+  const getResourceTags = () => {
+    return [...getActivityTags(), ...getDurationTag(), ...getCategoryTags()];
   };
 
   if (
@@ -46,21 +96,24 @@ export function useCoachMetadataTags(contentNode) {
     contentNode.kind === ContentNodeKinds.TOPIC
   ) {
     tags.value = [
+      getKindTag(),
       ...getCategoryTags().slice(0, 3),
       ...getLevelTags().slice(0, 3),
-      ...getLanguageTag(),
+      getLanguageTag(),
     ];
   } else {
     tags.value = [
-      ...getActivityTag(),
-      ...getDurationTag(),
+      ...getActivityTags(),
+      //getDurationTag(),
       ...getLevelTags(),
       ...getSpecificCategoryTag(),
-      ...getLanguageTag(),
+      getLanguageTag(),
     ].slice(0, 3);
   }
 
   return {
     tags,
+    getFolderTags,
+    getResourceTags,
   };
 }
diff --git a/packages/kolibri-common/composables/useLearningActivities.js b/packages/kolibri-common/composables/useLearningActivities.js
new file mode 100644
index 0000000000..8127c57bb2
--- /dev/null
+++ b/packages/kolibri-common/composables/useLearningActivities.js
@@ -0,0 +1,190 @@
+/**
+ * Everything related to learning activities of a content node
+ * and their duration.
+ */
+
+import { computed } from 'vue';
+import { get } from '@vueuse/core';
+import CompletionCriteria from 'kolibri-constants/CompletionCriteria';
+import lodashGet from 'lodash/get';
+import { LearningActivities, ContentNodeKinds } from 'kolibri/constants';
+import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
+
+const DURATION_THRESHOLD = 60 * 30; // 30 minutes in seconds
+
+export default function useLearningActivities(contentNode) {
+  const ReferenceLabel = coreStrings.$tr('readReference');
+  const _LearningActivityToLabelMap = {
+    [LearningActivities.CREATE]: coreStrings.$tr('create'),
+    [LearningActivities.LISTEN]: coreStrings.$tr('listen'),
+    [LearningActivities.REFLECT]: coreStrings.$tr('reflect'),
+    [LearningActivities.PRACTICE]: coreStrings.$tr('practice'),
+    [LearningActivities.READ]: coreStrings.$tr('read'),
+    [LearningActivities.WATCH]: coreStrings.$tr('watch'),
+    [LearningActivities.EXPLORE]: coreStrings.$tr('explore'),
+  };
+
+  const _LearningActivityToIconMap = {
+    [LearningActivities.CREATE]: 'createSolid',
+    [LearningActivities.LISTEN]: 'listenSolid',
+    [LearningActivities.REFLECT]: 'reflectSolid',
+    [LearningActivities.PRACTICE]: 'practiceSolid',
+    [LearningActivities.READ]: 'readSolid',
+    [LearningActivities.WATCH]: 'watchSolid',
+    [LearningActivities.EXPLORE]: 'interactSolid',
+  };
+
+  /**
+   * @returns {Boolean} Does the content node have exactly
+   *                    one learning activity associated with it?
+   */
+  const hasSingleActivity = computed(() => {
+    return (
+      contentNode && contentNode.learning_activities && contentNode.learning_activities.length === 1
+    );
+  });
+
+  /**
+   * @returns {String,null} A constant of the first learning activity
+   *                        associated with the content node.
+   *
+   */
+  const firstActivity = computed(() => {
+    if (
+      !contentNode ||
+      !contentNode.learning_activities ||
+      contentNode.learning_activities.length === 0
+    ) {
+      return null;
+    }
+    return contentNode.learning_activities[0];
+  });
+
+  /**
+   * @returns {Boolean} `true` if the content node has completion criterion
+   *                   set to reference.
+   */
+  const isReference = computed(() => {
+    return (
+      lodashGet(contentNode, ['options', 'completion_criteria', 'model']) ===
+      CompletionCriteria.REFERENCE
+    );
+  });
+
+  /**
+   * @returns {Boolean} Does the content node have truthy duration?
+   */
+  const hasDuration = computed(() => {
+    return contentNode && contentNode.duration;
+  });
+
+  /**
+   * Should we display precise time duration for the content node?
+   *
+   * @returns {Boolean} `true` when the content node has a duration and the time
+   *                    completion criterion.
+   */
+  const displayPreciseDuration = computed(() => {
+    return (
+      contentNode &&
+      contentNode.duration &&
+      (contentNode.kind == ContentNodeKinds.AUDIO || contentNode.kind == ContentNodeKinds.VIDEO)
+    );
+  });
+
+  /**
+   * Should we display an estimated duration for the content node?
+   *
+   * @returns {Boolean} `true` when the content node has a duration and the approx_time
+   *                    completion criterion.
+   */
+  const displayEstimatedDuration = computed(() => {
+    return (
+      contentNode &&
+      contentNode.duration &&
+      contentNode.kind !== ContentNodeKinds.AUDIO &&
+      contentNode.kind !== ContentNodeKinds.VIDEO &&
+      (lodashGet(contentNode, ['options', 'completion_criteria', 'model']) ===
+        CompletionCriteria.APPROX_TIME ||
+        lodashGet(contentNode, ['options', 'completion_criteria', 'model']) ===
+          CompletionCriteria.TIME)
+    );
+  });
+
+  /**
+   * @returns {Number}
+   */
+  const durationInSeconds = computed(() => {
+    return contentNode && contentNode.duration ? contentNode.duration : 0;
+  });
+
+  /**
+   * @returns {String} Returns the translated 'Short activity' label when duration is less
+   *                   than or equal to 30 minutes.
+   *                   Otherwise returns the translated 'Long activity' label.
+   */
+  const durationEstimation = computed(() => {
+    if (!get(hasDuration)) {
+      return '';
+    }
+    return contentNode.duration <= DURATION_THRESHOLD
+      ? coreStrings.$tr('shortActivity')
+      : coreStrings.$tr('longActivity');
+  });
+
+  /**
+   * @returns {String} Returns the translated exercise type(Practice Quiz or other)
+   */
+  const exerciseDescription = computed(() => {
+    const isPracticeQuiz = lodashGet(contentNode, ['options', 'modality'], false) === 'QUIZ';
+    const assessmentmetadata_mastery_model = lodashGet(
+      contentNode,
+      ['assessmentmetadata', 'mastery_model'],
+      false,
+    );
+
+    if (assessmentmetadata_mastery_model) {
+      if (assessmentmetadata_mastery_model.type == 'do_all' && isPracticeQuiz) {
+        return coreStrings.$tr('practiceQuizLabel');
+      } else if (assessmentmetadata_mastery_model.type.match(/num_correct_in_a_row_\d+/)) {
+        const count = assessmentmetadata_mastery_model.type.match(/\d+/)[0];
+        return coreStrings.$tr('shortExerciseGoalDescription', { count: count });
+      } else {
+        const m = assessmentmetadata_mastery_model.m;
+        return coreStrings.$tr('shortExerciseGoalDescription', { count: m });
+      }
+    }
+    return '';
+  });
+
+  /**
+   * @param {String} learningActivity A learning activity constant
+   * @returns {String} A translated label for the learning activity
+   */
+  function getLearningActivityLabel(learningActivity) {
+    return _LearningActivityToLabelMap[learningActivity];
+  }
+
+  /**
+   * @param {String} learningActivity A learning activity constant
+   * @returns {String} An icon for the learning activity
+   */
+  function getLearningActivityIcon(learningActivity) {
+    return _LearningActivityToIconMap[learningActivity];
+  }
+
+  return {
+    ReferenceLabel,
+    hasSingleActivity,
+    firstActivity,
+    isReference,
+    hasDuration,
+    displayPreciseDuration,
+    displayEstimatedDuration,
+    durationInSeconds,
+    durationEstimation,
+    exerciseDescription,
+    getLearningActivityLabel,
+    getLearningActivityIcon,
+  };
+}
diff --git a/packages/kolibri/constants.js b/packages/kolibri/constants.js
index 939a75f913..a1afff9a58 100644
--- a/packages/kolibri/constants.js
+++ b/packages/kolibri/constants.js
@@ -1,5 +1,6 @@
 import invert from 'lodash/invert';
 import Subjects from 'kolibri-constants/labels/Subjects';
+import LearningActivities from 'kolibri-constants/labels/LearningActivities';
 // coach-facing
 export { default as ContentNodeResourceType } from 'kolibri-constants/labels/ResourceType';
 export { default as LearningActivities } from 'kolibri-constants/labels/LearningActivities';
@@ -41,6 +42,8 @@ export const ContentNodeKinds = {
   BOOKMARK: 'bookmark',
 };
 
+export const ActivitiesLookup = invert(LearningActivities);
+
 export const CategoriesLookup = invert(Subjects);
 
 export const AllCategories = 'all_categories';