Improve discovery of preview in kolibri for guest users

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

@@ -64,6 +64,7 @@
               :channelId="item.id"
               :detailsRouteName="detailsRouteName"
               style="flex-grow: 1; width: 100%"
+              @show-channel-details="handleShowChannelDetails"
             />
           </VLayout>
         </VFlex>
@@ -142,6 +143,22 @@
         </VLayout>
       </BottomBar>
     </VContainer>
+    <transition
+      name="backdrop"
+      appear
+    >
+      <div
+        v-if="showSidePanel"
+        class="backdrop"
+        @click="handleCloseSidePanel"
+      ></div>
+    </transition>
+    <ChannelDetailsSidePanel
+      v-if="showSidePanel"
+      v-model="showSidePanel"
+      :channelId="selectedChannelId"
+      @close="handleCloseSidePanel"
+    />
   </div>
 
 </template>
@@ -156,6 +173,7 @@
   import sortBy from 'lodash/sortBy';
   import union from 'lodash/union';
   import { RouteNames } from '../../constants';
+  import ChannelDetailsSidePanel from './ChannelDetailsSidePanel';
   import CatalogFilters from './CatalogFilters';
   import ChannelItem from './ChannelItem';
   import LoadingText from 'shared/views/LoadingText';
@@ -178,19 +196,16 @@
       Checkbox,
       ToolBar,
       OfflineText,
+      ChannelDetailsSidePanel,
     },
     mixins: [channelExportMixin, constantsTranslationMixin],
     data() {
       return {
         loading: true,
         loadError: false,
         selecting: false,
-
-        /**
-         * jayoshih: router guard makes it difficult to track
-         * differences between previous query params and new
-         * query params, so just track it manually
-         */
+        showSidePanel: false,
+        selectedChannelId: null,
         previousQuery: this.$route.query,
 
         /**
@@ -301,6 +316,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}}',
@@ -326,4 +349,41 @@
     margin: 0 auto;
   }
 
+  .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    background-attachment: fixed;
+  }
+
+  .backdrop-enter {
+    opacity: 0;
+  }
+
+  .backdrop-enter-to {
+    opacity: 1;
+  }
+
+  .backdrop-enter-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .backdrop-leave {
+    opacity: 1;
+  }
+
+  .backdrop-leave-to {
+    opacity: 0;
+  }
+
+  .backdrop-leave-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
 </style>

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

@@ -0,0 +1,152 @@
+<template>
+
+  <ResizableNavigationDrawer
+    right
+    :localName="'channel-details'"
+    :value="value"
+    :permanent="true"
+    :temporary="false"
+    v-bind="$attrs"
+    style="position: fixed; top: 0; right: 0; z-index: 10; height: 100vh"
+    @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>
+      <DetailsPanel
+        v-if="channel && details"
+        :details="channelWithDetails"
+        :loading="loading"
+        @generate-pdf="generatePDF"
+        @generate-csv="generateCSV"
+      />
+    </div>
+  </ResizableNavigationDrawer>
+
+</template>
+
+
+<script>
+
+  import { mapActions, mapGetters } from 'vuex';
+  import DetailsPanel from 'shared/views/details/DetailsPanel';
+  import { routerMixin } from 'shared/mixins';
+  import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
+  import { channelExportMixin } from 'shared/views/channel/mixins';
+
+  export default {
+    name: 'ChannelDetailsSidePanel',
+    components: {
+      ResizableNavigationDrawer,
+      DetailsPanel,
+    },
+    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 {
+              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>