Improve discovery of preview in kolibri for guest users

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetailsSidePanel.vue

@@ -0,0 +1,148 @@
+<template>
+
+  <ResizableNavigationDrawer
+    right
+    :localName="'channel-details'"
+    :value="value"
+    :permanent="true"
+    :temporary="false"
+    clipped
+    app
+    v-bind="$attrs"
+    style="z-index: 10; position: fixed;"
+    @input="$emit('input', $event)"
+    @resize="$emit('resize', $event)"
+  >
+    <div class="channel-details-content">
+      <VLayout row align-center class="mb-4">
+        <VFlex>
+          <h2 class="font-weight-bold headline">
+            {{ channel ? channel.name : '' }}
+          </h2>
+        </VFlex>
+        <VSpacer />
+        <VFlex shrink>
+          <KIconButton
+            icon="close"
+            :tooltip="$tr('close')"
+            @click="$emit('input', false)"
+          />
+        </VFlex>
+      </VLayout>
+
+      <Details
+        v-if="channel && details"
+        :details="channelWithDetails"
+        :loading="loading"
+        @generate-pdf="generatePDF"
+        @generate-csv="generateCSV"
+      />
+    </div>
+  </ResizableNavigationDrawer>
+
+</template>
+
+<script>
+
+  import { mapActions, mapGetters } from 'vuex';
+  import Details from 'shared/views/details/Details';
+  import { routerMixin } from 'shared/mixins';
+  import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
+  import { channelExportMixin } from 'shared/views/channel/mixins';
+
+  export default {
+    name: 'ChannelDetailsSidePanel',
+    components: {
+      ResizableNavigationDrawer,
+      Details,
+    },
+    mixins: [routerMixin, channelExportMixin],
+    props: {
+      channelId: {
+        type: String,
+        default: null,
+      },
+      value: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        details: null,
+        loading: true,
+      };
+    },
+    computed: {
+      ...mapGetters('channel', ['getChannel']),
+
+      channelWithDetails() {
+        if (!this.channel || !this.details) {
+          return {};
+        }
+        return { ...this.channel, ...this.details };
+      },
+      channel() {
+        return this.getChannel(this.channelId);
+      },
+    },
+    beforeMount() {
+      return this.load();
+    },
+    methods: {
+      ...mapActions('channel', ['loadChannel', 'loadChannelDetails']),
+      load() {
+        this.loading = true;
+        const channelPromise = this.loadChannel(this.channelId);
+        const detailsPromise = this.loadChannelDetails(this.channelId);
+
+        return Promise.all([channelPromise, detailsPromise])
+          .then(([channel, details]) => {
+            if (!channel) {
+              this.$router.replace(this.backLink).catch(() => {});
+              return;
+            }
+
+            this.details = details;
+            this.loading = false;
+          })
+          .catch(error => {
+            this.loading = false;
+            if (error.response) {
+              this.$store.dispatch('errors/handleAxiosError', error);
+            } else {
+              console.error('Error loading channel details:', error);
+              this.$store.dispatch('showSnackbarSimple', 'Error loading channel details');
+            }
+          });
+      },
+      async generatePDF() {
+        try {
+          this.$analytics.trackEvent('channel_details', 'Download PDF', {
+            id: this.channelId,
+          });
+          await this.generateChannelsPDF([this.channelWithDetails]);
+        } catch (error) {
+          this.$store.dispatch('showSnackbarSimple', 'Error generating PDF');
+        }
+      },
+      async generateCSV() {
+        this.$analytics.trackEvent('channel_details', 'Download CSV', {
+          id: this.channelId,
+        });
+        await this.generateChannelsCSV([this.channelWithDetails]);
+      },
+    },
+    $trs: {
+      close: 'Close',
+    },
+  };
+
+</script>
+
+<style>
+.channel-details-content {
+  padding: 20px;
+  padding-top: 40px;
+}
+</style>

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

@@ -47,6 +47,7 @@
               :channelId="item.id"
               :detailsRouteName="detailsRouteName"
               style="flex-grow: 1; width: 100%"
+              @show-channel-details="handleShowChannelDetails"
             />
           </VLayout>
         </VFlex>
@@ -97,6 +98,12 @@
         </VLayout>
       </BottomBar>
     </VContainer>
+    <ChannelDetailsSidePanel
+      v-if="showSidePanel"
+      v-model="showSidePanel"
+      :channelId="selectedChannelId"
+      @close="handleCloseSidePanel"
+    />
   </div>
 
 </template>
@@ -110,6 +117,7 @@
   import sortBy from 'lodash/sortBy';
   import union from 'lodash/union';
   import { RouteNames } from '../../constants';
+  import ChannelDetailsSidePanel from '../../../administration/pages/Channels/ChannelDetailsSidePanel';
   import CatalogFilters from './CatalogFilters';
   import ChannelItem from './ChannelItem';
   import LoadingText from 'shared/views/LoadingText';
@@ -132,14 +140,16 @@
       Checkbox,
       ToolBar,
       OfflineText,
+      ChannelDetailsSidePanel,
     },
     mixins: [channelExportMixin, constantsTranslationMixin],
     data() {
       return {
         loading: true,
         loadError: false,
         selecting: false,
-
+        showSidePanel: false,
+        selectedChannelId: null,
         /*
             jayoshih: router guard makes it difficult to track
               differences between previous query params and new
@@ -255,6 +265,14 @@
         this.setSelection(false);
         return this.downloadChannelsPDF(params);
       },
+      handleShowChannelDetails(channelId) {
+        this.showSidePanel = true;
+        this.selectedChannelId = channelId;
+      },
+      handleCloseSidePanel() {
+        this.showSidePanel = false;
+        this.selectedChannelId = null;
+      },
     },
     $trs: {
       resultsText: '{count, plural,\n =1 {# result found}\n other {# results found}}',