[Remove Vuetify from Studio] Content Library catalog page (#5526)

contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue

@@ -39,34 +39,36 @@
             appearance="basic-link"
             @click="setSelection(true)"
           />
-          <Checkbox
+          <KCheckbox
             v-else-if="selecting"
-            v-model="selectAll"
-            class="mb-4 mx-2"
+            :checked="selectAll"
+            :indeterminate="isIndeterminate"
             :label="$tr('selectAll')"
             data-test="select-all"
-            :indeterminate="selected.length > 0 && selected.length < channels.length"
+            class="mb-4 mx-2"
+            @change="toggleSelectAll"
           />
         </VFlex>
         <VFlex xs12>
-          <VLayout
-            v-for="item in channels"
-            :key="item.id"
-            align-center
+          <KCardGrid
+            layout="1-1-1"
+            :skeletonsConfig="[
+              {
+                breakpoints: [0, 1, 2, 3, 4, 5, 6, 7],
+                orientation: 'vertical',
+                count: 3,
+              },
+            ]"
           >
-            <Checkbox
-              v-show="selecting"
-              v-model="selected"
-              class="mx-2"
-              :value="item.id"
-              data-test="checkbox"
+            <StudioChannelCard
+              v-for="channel in channels"
+              :key="channel.id"
+              :channel="channel"
+              :selectable="selecting"
+              :selected="isChannelSelected(channel.id)"
+              @toggle-selection="handleSelectionToggle"
             />
-            <ChannelItem
-              :channelId="item.id"
-              :detailsRouteName="detailsRouteName"
-              style="flex-grow: 1; width: 100%"
-            />
-          </VLayout>
+          </KCardGrid>
         </VFlex>
         <VFlex
           xs12
@@ -130,11 +132,10 @@
   import union from 'lodash/union';
   import { RouteNames } from '../../constants';
   import CatalogFilters from './CatalogFilters';
-  import ChannelItem from './ChannelItem';
+  import StudioChannelCard from './components/StudioChannelCard';
   import LoadingText from 'shared/views/LoadingText';
   import Pagination from 'shared/views/Pagination';
   import BottomBar from 'shared/views/BottomBar';
-  import Checkbox from 'shared/views/form/Checkbox';
   import ToolBar from 'shared/views/ToolBar';
   import OfflineText from 'shared/views/OfflineText';
   import { constantsTranslationMixin } from 'shared/mixins';
@@ -143,12 +144,11 @@
   export default {
     name: 'CatalogList',
     components: {
-      ChannelItem,
+      StudioChannelCard,
       LoadingText,
       CatalogFilters,
       Pagination,
       BottomBar,
-      Checkbox,
       ToolBar,
       OfflineText,
     },
@@ -202,9 +202,6 @@
       debouncedSearch() {
         return debounce(this.loadCatalog, 1000);
       },
-      detailsRouteName() {
-        return RouteNames.CATALOG_DETAILS;
-      },
       channels() {
         // Sort again by the same ordering used on the backend - name.
         // Have to do this because of how we are getting the object data via getChannels.
@@ -213,6 +210,9 @@
       selectedCount() {
         return this.page.count - this.excluded.length;
       },
+      isIndeterminate() {
+        return this.selected.length > 0 && this.selected.length < this.channels.length;
+      },
     },
     watch: {
       $route(to) {
@@ -236,6 +236,20 @@
     },
     methods: {
       ...mapActions('channelList', ['searchCatalog']),
+      isChannelSelected(channelId) {
+        return this.selected.includes(channelId);
+      },
+      handleSelectionToggle(channelId) {
+        const currentlySelected = this.selected;
+        if (currentlySelected.includes(channelId)) {
+          this.selected = currentlySelected.filter(id => id !== channelId);
+        } else {
+          this.selected = [...currentlySelected, channelId];
+        }
+      },
+      toggleSelectAll() {
+        this.selectAll = !this.selectAll;
+      },
       loadCatalog() {
         this.loading = true;
         const params = {