use Accessible*Cards in LessonResourceSelectiionPage

learningequality · Feb 7, 2025 · f676591 · f676591
1 parent 8c5f609
commit f676591
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 48 deletions.
diff --git a/...ri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue b/...ri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
@@ -1,24 +1,29 @@
 <template>
 
-  <div>
-    <ul class="content-list">
-      <KCheckbox
-        v-if="showSelectAll"
-        :label="$tr('selectAllCheckboxLabel')"
-        :checked="selectAllChecked"
-        :indeterminate="selectAllIndeterminate"
-        @change="$emit('changeselectall', $event)"
-      />
-      <KRadioButtonGroup>
-        <li
-          v-for="content in contentList"
-          :key="content.id"
-          class="content-list-item"
-          :aria-selected="contentIsChecked(content)"
-        >
+  <div class="content-list">
+    <KCheckbox
+      v-if="showSelectAll"
+      :label="$tr('selectAllCheckboxLabel')"
+      :checked="selectAllChecked"
+      :indeterminate="selectAllIndeterminate"
+      @change="$emit('changeselectall', $event)"
+    />
+    <KCardGrid layout="1-1-1">
+      <component
+        :is="content.is_leaf ? 'AccessibleResourceCard' : 'AccessibleFolderCard'"
+        v-for="content in contentList"
+        :key="content.id"
+        :to="contentCardLink(content)"
+        :contentNode="content"
+        :thumbnailSrc="content.thumbnail"
+        :headingLevel="cardsHeadingLevel"
+      >
+        <template #belowTitle>
+          <p v-if="contentCardMessage(content)">{{ contentCardMessage(content) }}</p>
+        </template>
+        <template #select>
           <KCheckbox
             v-if="contentHasCheckbox(content) && !showRadioButtons"
-            class="content-checkbox"
             :label="content.title"
             :showLabel="false"
             :checked="contentIsChecked(content)"
@@ -28,39 +33,16 @@
           />
           <KRadioButton
             v-else-if="contentHasCheckbox(content) && showRadioButtons"
-            class="content-checkbox"
             :label="content.title"
             :showLabel="false"
             :currentValue="contentIsChecked(content) ? content.id : 'none'"
             :buttonValue="content.id"
             :disabled="contentCheckboxDisabled(content)"
             @change="handleCheckboxChange(content, true)"
           />
-          <!--
-          disabled, tabindex, is-leaf class set here to hack making the card not clickable
-          if you're trying to make the card clickable remove these properties
-        -->
-          <LessonContentCard
-            class="content-card"
-            :disabled="content.is_leaf"
-            :tabindex="content.is_leaf ? -1 : 0"
-            :class="{ 'with-checkbox': needCheckboxes }"
-            :content="content"
-            :message="contentCardMessage(content)"
-            :link="contentCardLink(content)"
-            :headingLevel="cardsHeadingLevel"
-          >
-            <template #notice>
-              <slot
-                name="notice"
-                :content="content"
-              >
-              </slot>
-            </template>
-          </LessonContentCard>
-        </li>
-      </KRadioButtonGroup>
-    </ul>
+        </template>
+      </component>
+    </KCardGrid>
 
     <template>
       <KButton
@@ -90,13 +72,15 @@
 <script>
 
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import AccessibleFolderCard from 'kolibri-common/components/Cards/AccessibleFolderCard';
+  import AccessibleResourceCard from 'kolibri-common/components/Cards/AccessibleResourceCard';
   import { ViewMoreButtonStates } from '../../../constants/index';
-  import LessonContentCard from './LessonContentCard';
 
   export default {
     name: 'ContentCardList',
     components: {
-      LessonContentCard,
+      AccessibleResourceCard,
+      AccessibleFolderCard,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -173,9 +157,6 @@
       showButton() {
         return this.viewMoreButtonState === this.ViewMoreButtonStates.HAS_MORE;
       },
-      needCheckboxes() {
-        return this.contentList.some(c => this.contentHasCheckbox(c));
-      },
     },
     methods: {
       handleCheckboxChange(content, checked) {

diff --git a/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue b/packages/kolibri-common/components/Cards/AccessibleFolderCard.vue
@@ -20,6 +20,7 @@
     </template>
 
     <template #belowTitle>
+      <slot name="belowTitle"></slot>
       <div
         class="header-bar"
         :style="headerStyles"

diff --git a/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue b/packages/kolibri-common/components/Cards/AccessibleResourceCard.vue
@@ -23,6 +23,9 @@
         />
       </div>
     </template>
+    <template #select>
+      <slot name="select"></slot>
+    </template>
     <template #footer>
       <div class="default-icon">
         <KIconButton