Update tree view to include new metadata

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.spec.js

@@ -63,10 +63,6 @@ describe('ContentNodeListItem', () => {
     expect(wrapper.contains('[data-test="btn-chevron"]')).toBe(false);
   });
 
-  it("doesn't render a subtitle for a node different from topic and exercise", () => {
-    expect(wrapper.contains('[data-test="subtitle"]')).toBe(false);
-  });
-
   it('emits an event when list item is clicked', () => {
     wrapper.find('[data-test="content-item"]').trigger('click');
 

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue

@@ -28,8 +28,10 @@
                     'py-3': isCompact,
                   }"
                 >
-                  <Thumbnail
+                  <ImageOnlyThumbnail
                     v-bind="thumbnailAttrs"
+                    :isTopic="isTopic"
+                    :learningActivities="node.learning_activities"
                     :compact="isCompact"
                     :isEmpty="node.total_count === 0"
                   />
@@ -64,13 +66,32 @@
                       </VFlex>
                     </VLayout>
                   </VListTileTitle>
+
+                  <ToggleText
+                    v-show="!isCompact && !comfortable"
+                    :text="node.description"
+                    data-test="description"
+                    notranslate
+                    dir="auto"
+                    :splitAt="280"
+                  />
+
                   <VListTileSubTitle
-                    v-if="(subtitle || node.coach_content) && !isCompact"
+                    v-if="!isCompact"
                     data-test="subtitle"
                     class="metadata"
                   >
-                    <span>{{ subtitle }}</span>
+                    <span v-if="subtitle" class="text">{{ subtitle }}</span>
+                    <span
+                      v-if="node.categories ? Object.keys(node.categories).length > 0 : null"
+                      class="text"
+                    >
+                      {{ category(node.categories) }}
+                    </span>
                     <span v-if="(isTopic && node.coach_count) || isCoach">
+                      <!-- for each learning activity -->
+
+
                       <VTooltip bottom>
                         <template #activator="{ on }">
                           <div style="display: inline-block;" v-on="on">
@@ -79,7 +100,9 @@
                               small
                               class="mx-1"
                               style="vertical-align: text-top;"
-                            >local_library</Icon>
+                            >
+                              local_library
+                            </Icon>
                             <span v-if="isTopic">
                               {{ $formatNumber(node.coach_count) }}
                             </span>
@@ -94,13 +117,28 @@
                       </VTooltip>
                     </span>
                   </VListTileSubTitle>
-                  <ToggleText
-                    v-show="!isCompact && !comfortable"
-                    :text="node.description"
-                    data-test="description"
-                    notranslate
-                    dir="auto"
-                  />
+                  <span v-if="!isCompact">
+
+                    <ContentNodeLearningActivityIcon
+                      v-if="!isTopic"
+                      :learningActivities="node.learning_activities"
+                      showEachActivityIcon
+                      includeText
+                      small
+                      chip
+                      class="inline"
+                    />
+                    <span v-if="node.grade_levels">
+                      <span
+                        v-for="(key, index) in Object.keys(node.grade_levels)"
+                        :key="index"
+                        class="small-chip"
+                        :style="{ backgroundColor: $themeTokens.fineLine }"
+                      >
+                        {{ levels(key) }}
+                      </span>
+                    </span>
+                  </span>
                 </VListTileContent>
 
                 <VListTileContent class="actions-end-col updated">
@@ -129,10 +167,7 @@
                   </div>
                   <div class="disabled-overlay"></div>
                 </template>
-                <slot
-                  name="context-menu"
-                  v-bind="contextMenuProps"
-                ></slot>
+                <slot name="context-menu" v-bind="contextMenuProps"></slot>
               </VListTile>
 
             </template>
@@ -149,33 +184,37 @@
 <script>
 
   import { mapActions } from 'vuex';
+  import { camelCase } from 'lodash';
   import ContentNodeValidator from '../ContentNodeValidator';
   import ContentNodeChangedIcon from '../ContentNodeChangedIcon';
   import TaskProgress from '../../views/progress/TaskProgress';
+  import { ContentLevel, Categories } from '../../../shared/constants';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import { RolesNames } from 'shared/leUtils/Roles';
-  import Thumbnail from 'shared/views/files/Thumbnail';
+  import ImageOnlyThumbnail from 'shared/views/files/ImageOnlyThumbnail';
   import IconButton from 'shared/views/IconButton';
   import ToggleText from 'shared/views/ToggleText';
   import ContextMenuCloak from 'shared/views/ContextMenuCloak';
   import DraggableHandle from 'shared/views/draggable/DraggableHandle';
-  import { titleMixin } from 'shared/mixins';
+  import { titleMixin, metadataTranslationMixin } from 'shared/mixins';
   import { COPYING_FLAG, TASK_ID } from 'shared/data/constants';
   import { EffectAllowed } from 'shared/mixins/draggable/constants';
+  import ContentNodeLearningActivityIcon from 'shared/views/ContentNodeLearningActivityIcon';
 
   export default {
     name: 'ContentNodeListItem',
     components: {
       DraggableHandle,
       ContextMenuCloak,
-      Thumbnail,
+      ImageOnlyThumbnail,
       IconButton,
       ContentNodeValidator,
       ContentNodeChangedIcon,
       ToggleText,
       TaskProgress,
+      ContentNodeLearningActivityIcon,
     },
-    mixins: [titleMixin],
+    mixins: [titleMixin, metadataTranslationMixin],
     props: {
       node: {
         type: Object,
@@ -267,6 +306,30 @@
           this.isTopic ? this.$emit('topicChevronClick') : this.$emit('infoClick');
         }
       },
+      metadataListText(ids) {
+        // an array of values, rather than an internationalized list
+        // is created here (unlike in ResourcePanel), because the values
+        // are used to create one or more individual "chips" to display
+        // rather than a string of text
+        return ids.map(i => this.translateMetadataString(camelCase(i))).join(', ');
+      },
+      category(options) {
+        const ids = Object.keys(options);
+        const matches = Object.keys(Categories)
+          .sort()
+          .filter(k => ids.includes(Categories[k]));
+        if (matches && matches.length > 0) {
+          return this.metadataListText(matches);
+        }
+        return null;
+      },
+      levels(level) {
+        const match = Object.keys(ContentLevel).find(key => ContentLevel[key] === level);
+        if (match) {
+          return this.translateMetadataString(camelCase(match));
+        }
+        return null;
+      },
     },
     $trs: {
       resources: '{value, number, integer} {value, plural, one {resource} other {resources}}',
@@ -299,6 +362,16 @@
     }
   }
 
+  .inline {
+    display: inline-block;
+  }
+
+  .text {
+    display: inline-block;
+    margin: 0;
+    font-size: 12px;
+  }
+
   .disabled-overlay {
     position: absolute;
     z-index: 1;
@@ -386,4 +459,12 @@
     content: ' • ';
   }
 
+  .small-chip {
+    display: inline-block;
+    padding: 2px 4px;
+    margin: 2px;
+    font-size: 10px;
+    border-radius: 4px;
+  }
+
 </style>