Skip to content

Improve discovery of preview in kolibri for guest users #5037

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: unstable
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -7,9 +7,9 @@
:class="{ added }"
data-test="channel-card"
tabindex="0"
:href="linkToChannelTree ? channelHref : null"
:to="linkToChannelTree ? null : channelDetailsLink"
@click="goToChannelRoute"
:href="isInChannelList && linkToChannelTree ? channelHref : null"
:to="isInChannelList ? (linkToChannelTree ? null : channelDetailsLink) : null"
@click="handleChannelClick"
>
<VLayout
row
@@ -110,29 +110,32 @@
:to="channelDetailsLink"
>
<KIconButton
v-if="detailsIcon"
:color="$themeTokens.primary"
data-test="details-button"
:data-test="detailsIcon.dataTest"
class="mr-1"
icon="info"
:tooltip="$tr('details')"
:icon="detailsIcon.icon"
:tooltip="detailsIcon.tooltip"
/>
</KRouterLink>

<KIconButton
v-if="!allowEdit && channel.published"
v-for="config in filteredIcons"
:key="config.key"
class="mr-1"
icon="copy"
:tooltip="$tr('copyToken')"
data-test="token-button"
@click.stop.prevent="tokenDialog = true"
:icon="config.icon"
:tooltip="config.tooltip"
:data-test="config.dataTest"
@click.stop.prevent="config.clickHandler"
/>
<ChannelStar
v-if="loggedIn"
:channelId="channelId"
:bookmark="channel.bookmark"
class="mr-1"
/>
<BaseMenu v-if="showOptions">

<BaseMenu v-if="showKebabMenu">
<template #activator="{ on }">
<VBtn
icon
@@ -271,6 +274,10 @@
type: Boolean,
default: false,
},
isInChannelList: {
type: Boolean,
default: false,
},
},
data() {
return {
@@ -327,13 +334,72 @@
libraryMode() {
return window.libraryMode;
},
showOptions() {
return (
this.allowEdit ||
this.channel.source_url ||
this.channel.demo_server_url ||
(this.channel.published && this.allowEdit)
);
hasUnpublishedChanges() {
return !this.channel.last_published || this.channel.modified > this.channel.last_published;
},
filteredIcons() {
return this.iconConfigs
.filter(c => ['copy', 'open-tab-link'].includes(c.key))
.filter(c => c.show);
},
detailsIcon() {
return this.iconConfigs.find(c => c.key === 'details' && c.show);
},
iconConfigs() {
return [
{
key: 'copy',
show: !this.allowEdit && this.channel.published,
icon: 'copy',
tooltip: this.$tr('copyToken'),
dataTest: 'token-button',
clickHandler: () => {
this.tokenDialog = true;
},
},
// show open tab link when
// only one of source or demo server url is present
// we do not show this icon if we are in channel list
{
key: 'open-tab-link',
show:
!this.isInChannelList &&
(this.channel.demo_server_url || this.channel.source_url) &&
((this.loggedIn && !this.channel.demo_server_url && this.channel.source_url) ||
(this.loggedIn && !this.channel.source_url && this.channel.demo_server_url) ||
(!this.loggedIn &&
this.channel.published &&
// this check ensures that we show link to both in kebab menu
!(this.channel.source_url && this.channel.demo_server_url))),
icon: 'openNewTab',
tooltip: this.channel.demo_server_url
? this.$tr('viewOnKolibri')
: this.$tr('goToWebsite'),
dataTest: 'view-on-kolibri',
clickHandler: () => {
this.viewOnKolibri();
},
},
{
key: 'details',
show: !this.libraryMode && this.loggedIn,
icon: 'info',
tooltip: this.$tr('details'),
dataTest: 'details-button',
to: this.channelDetailsLink,
},
// show kebab menu when
// we are listing channels
// or when both source and demo server urls are present and user is logged in
{
key: 'kebab-menu',
show:
this.isInChannelList ||
(this.loggedIn && this.channel.source_url && this.channel.demo_server_url),
icon: 'optionsVertical',
dataTest: 'menu',
},
];
},
linkToChannelTree() {
return this.loggedIn && !this.libraryMode;
@@ -345,8 +411,9 @@
return false;
}
},
hasUnpublishedChanges() {
return !this.channel.last_published || this.channel.modified > this.channel.last_published;
showKebabMenu() {
const kebabConfig = this.iconConfigs.find(config => config.key === 'kebab-menu');
return Boolean(kebabConfig && kebabConfig.show);
},
},
mounted() {
@@ -375,16 +442,21 @@
});
}
},
goToChannelRoute() {
this.linkToChannelTree
? (window.location.href = this.channelHref)
: this.$router.push(this.channelDetailsLink).catch(() => {});
handleChannelClick() {
if (!this.isInChannelList) {
this.$emit('show-channel-details', this.channelId);
}
},
trackTokenCopy() {
this.$analytics.trackAction('channel_list', 'Copy token', {
eventLabel: this.channel.primary_token,
});
},
viewOnKolibri() {
if (this.channel.demo_server_url) {
window.open(this.channel.demo_server_url, '_blank');
}
},
},
$trs: {
resourceCount: '{count, plural,\n =1 {# resource}\n other {# resources}}',
@@ -408,6 +480,7 @@
channelRemovedSnackbar: 'Channel removed',
channelLanguageNotSetIndicator: 'No language set',
cancel: 'Cancel',
viewOnKolibri: 'View on Kolibri',
},
};
Original file line number Diff line number Diff line change
@@ -55,6 +55,7 @@
v-for="channel in listChannels"
:key="channel.id"
:channelId="channel.id"
:isInChannelList="true"
allowEdit
fullWidth
/>
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ function makeWrapper(allowEdit, deleteStub, libraryMode) {
propsData: {
channelId: channelId,
allowEdit: allowEdit,
isInChannelList: true,
},
computed: {
libraryMode() {
Original file line number Diff line number Diff line change
@@ -1,27 +1,104 @@
<template>

<div :class="{ printing }">
<div style="max-width: 300px">
<Thumbnail
:src="isChannel ? _details.thumbnail_url : _details.thumbnail_src"
:encoding="isChannel ? _details.thumbnail_encoding : null"
/>
</div>
<br >
<h1
class="notranslate"
dir="auto"
>
{{ isChannel ? _details.name : _details.title }}
</h1>
<p
class="notranslate"
dir="auto"
<VLayout
row
class="details-layout"
>
{{ _details.description }}
</p>
<VFlex
xs7
class="details-content"
>
<p
class="notranslate"
dir="auto"
>
{{ _details.description }}
</p>
</VFlex>
<VFlex
xs5
class="pa-3"
>
<Thumbnail
:src="isChannel ? _details.thumbnail_url : _details.thumbnail_src"
:encoding="isChannel ? _details.thumbnail_encoding : null"
/>
</VFlex>
</VLayout>
<br >

<!-- Action Buttons -->
<VLayout
v-if="isChannel"
row
class="mb-4"
style="margin-left: -8px"
>
<VBtn
v-if="!loggedIn && _details.demo_server_url"
color="primary"
class="mr-2"
@click="viewInKolibri"
>
<Icon
class="mr-2"
icon="openNewTab"
:color="$themeTokens.textInverted"
/>
{{ $tr('viewInKolibri') }}
</VBtn>
<VBtn
v-else-if="_details.source_url"
color="primary"
class="mr-2"
:href="channelHref"
>
{{ $tr('goToChannel') }}
</VBtn>
<BaseMenu>
<template #activator="{ on }">
<VBtn
color="primary"
v-on="on"
>
{{ loggedIn ? $tr('options') : $tr('downloadButton') }}
<Icon
class="ml-1"
icon="dropdown"
:color="$themeTokens.textInverted"
/>
</VBtn>
</template>
<VList>
<template v-if="loggedIn">
<VListTile
v-if="_details.source_url"
:href="_details.source_url"
target="_blank"
>
<VListTileTitle>{{ $tr('goToWebsite') }}</VListTileTitle>
</VListTile>
<VListTile
v-if="_details.demo_server_url"
@click="viewInKolibri"
>
<VListTileTitle>{{ $tr('viewInKolibri') }}</VListTileTitle>
</VListTile>
</template>
<VListTile @click="$emit('generate-pdf')">
<VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
</VListTile>
<VListTile
data-test="dl-csv"
@click="$emit('generate-csv')"
>
<VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
</VListTile>
</VList>
</BaseMenu>
</VLayout>

<template v-if="isChannel">
<DetailsRow
v-if="_details.published && _details.primary_token"
@@ -357,10 +434,12 @@

<script>
import { mapGetters } from 'vuex';
import cloneDeep from 'lodash/cloneDeep';
import defaultsDeep from 'lodash/defaultsDeep';
import camelCase from 'lodash/camelCase';
import orderBy from 'lodash/orderBy';
import BaseMenu from '../BaseMenu.vue';
import { SCALE_TEXT, SCALE, CHANNEL_SIZE_DIVISOR } from './constants';
import DetailsRow from './DetailsRow';
import { CategoriesLookup, LevelsLookup } from 'shared/constants';
@@ -419,6 +498,7 @@
CopyToken,
DetailsRow,
Thumbnail,
BaseMenu,
},
mixins: [
fileSizeMixin,
@@ -428,10 +508,6 @@
metadataTranslationMixin,
],
props: {
// Object matching that returned by the channel details and
// node details API endpoints, see backend for details of the
// object structure and keys. get_details method on ContentNode
// model as a starting point.`
details: {
type: Object,
required: true,
@@ -446,6 +522,13 @@
},
},
computed: {
...mapGetters(['loggedIn']),
channelHref() {
if (this.loggedIn && !window.libraryMode) {
return window.Urls.channel(this._details.id);
}
return null;
},
_details() {
const details = cloneDeep(this.details);
defaultsDeep(details, DEFAULT_DETAILS);
@@ -552,6 +635,11 @@
channelUrl(channel) {
return window.Urls.channel(channel.id);
},
viewInKolibri() {
if (this._details.demo_server_url) {
window.open(this._details.demo_server_url, '_blank');
}
},
},
$trs: {
/* eslint-disable kolibri/vue-no-unused-translations */
@@ -590,6 +678,13 @@
currentVersionHeading: 'Published version',
primaryLanguageHeading: 'Primary language',
unpublishedText: 'Unpublished',
viewInKolibri: 'View in Kolibri',
goToChannel: 'Go to Channel',
goToWebsite: 'Go to source website',
options: 'Options',
downloadButton: 'Download channel summary',
downloadPDF: 'Download PDF',
downloadCSV: 'Download CSV',
},
};
@@ -606,6 +701,14 @@
}
}
.details-layout {
align-items: center;
}
.details-content {
padding-right: 16px;
}
.v-toolbar__title {
font-weight: bold;
}