add messages; slots for showing them w/out issues in other usages of …

…card list

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue

@@ -50,6 +50,14 @@
         </div>
       </div>
 
+      <div
+        v-if="showTopicSizeWarning()"
+        class="shadow"
+        :style=" { padding: '1em', backgroundColor: $themePalette.grey.v_100 }"
+      >
+        {{ cannotSelectSomeTopicWarning$() }}
+      </div>
+
       <ResourceSelectionBreadcrumbs
         v-if="isTopicIdSet"
         :ancestors="topic.ancestors"
@@ -70,7 +78,14 @@
         @changeselectall="handleSelectAll"
         @change_content_card="toggleSelected"
         @moreresults="fetchMoreQuizResources"
-      />
+      >
+        <template #notice="{ content }">
+          <div v-if="showTopicSizeWarningCard(content)" style="position: absolute; bottom: 1em;">
+            <KIcon icon="warning" :color="$themePalette.orange.v_400" />
+            <span>&nbsp;&nbsp;{{ cannotSelectTopicCard$() }}</span>
+          </div>
+        </template>
+      </ContentCardList>
 
       <div class="bottom-navigation">
         <KGrid>
@@ -145,6 +160,8 @@
         numberOfSelectedResources$,
         numberOfResources$,
         selectedResourcesInformation$,
+        cannotSelectTopicCard$,
+        cannotSelectSomeTopicWarning$,
       } = enhancedQuizManagementStrings;
 
       // TODO let's not use text for this
@@ -383,6 +400,8 @@
         resetWorkingResourcePool,
         contentPresentInWorkingResourcePool,
         //contentList,
+        cannotSelectTopicCard$,
+        cannotSelectSomeTopicWarning$,
         sectionSettings$,
         selectFromBookmarks$,
         numberOfSelectedBookmarks$,
@@ -439,6 +458,12 @@
       },
     },
     methods: {
+      showTopicSizeWarningCard(content) {
+        return !this.hasCheckbox(content) && content.kind === ContentNodeKinds.TOPIC;
+      },
+      showTopicSizeWarning() {
+        return this.contentList.some(this.showTopicSizeWarningCard);
+      },
       /** @public */
       focusFirstEl() {
         this.$refs.textbox.focus();
@@ -593,4 +618,9 @@
     margin-top: 2em;
   }
 
-</style>
+  .shadow {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+      0 2px 1px -1px rgba(0, 0, 0, 0.12);
+  }
+
+</style>

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

@@ -33,7 +33,11 @@
           :link="contentCardLink(content)"
           :numCoachContents="content.num_coach_contents"
           :isLeaf="content.is_leaf"
-        />
+        >
+          <template #notice>
+            <slot name="notice" :content="content"></slot>
+          </template>
+        </LessonContentCard>
       </li>
     </ul>
 

kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue

@@ -52,6 +52,7 @@
           :isTopic="isTopic"
         />
       </div>
+      <slot name="notice"></slot>
     </div>
 
   </router-link>

packages/kolibri-common/strings/enhancedQuizManagementStrings.js

@@ -154,4 +154,11 @@ export const enhancedQuizManagementStrings = createTranslator('EnhancedQuizManag
     message:
       '{count, number, integer} of {total, number, integer} {total, plural, one {resource selected} other {resources selected}}',
   },
+  cannotSelectTopicCard: {
+    message: 'Folder exceeds 12 exercises',
+  },
+  cannotSelectSomeTopicWarning: {
+    message:
+      'Select only folders with 12 or fewer exercises and no subfolders to avoid oversized quizzes. Proceed to choose a smaller folder.',
+  },
 });