Skip to content

Commit

Permalink
Simplify LibraryItem API to allow reuse in OtherLibraries.
Browse files Browse the repository at this point in the history
  • Loading branch information
@rtibbles
rtibbles committed Oct 20, 2023
1 parent c667cbf commit 90f34dd
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 105 deletions.
118 changes: 38 additions & 80 deletions kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<KIconButton
ref="pinIcon"
:icon="pinIcon"
:disabled="disablePinDevice"
:disabled="isStudio"
appearance="flat-button"
@click="$emit('togglePin', deviceId)"
/>
Expand All @@ -33,7 +33,7 @@
</KTooltip>
</h2>
<p
v-if="showDescription"
v-if="isStudio"
class="device-description"
>
{{ $tr('channels', { channels: totalChannels }) }}
Expand All @@ -48,25 +48,16 @@
<KRouterLink
appearance="raised-button"
:text="coreString('explore')"
:to="genLibraryPageBackLink(deviceId, false)"
/>
</KGridItem>
</div>
<div class="library-channels">
<KGridItem
v-for="channel in channels.slice(0, cardsPerRow)"
:key="channel.id"
:layout="{ span: layoutSpan }"
>
<ChannelCard
:title="channel.name"
:tagline="channel.tagline || channel.description"
:thumbnail="channel.thumbnail"
:link="genContentLinkBackLinkCurrentPage(channel.root, false, deviceId)"
:version="channel.version"
:to="genLibraryPageBackLink(deviceId)"
/>
</KGridItem>
</div>
<ChannelCardGroupGrid
data-test="channel-cards"
:deviceId="device.id"
:contents="channels"
:isRemote="true"
/>
</KGrid>

</template>
Expand All @@ -77,12 +68,13 @@
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
import useContentLink from '../../composables/useContentLink';
import ChannelCard from '../ChannelCard';
import { KolibriStudioId } from '../../constants';
import ChannelCardGroupGrid from '../ChannelCardGroupGrid';
export default {
name: 'LibraryItem',
components: {
ChannelCard,
ChannelCardGroupGrid,
},
mixins: [commonCoreStrings],
setup() {
Expand All @@ -97,19 +89,10 @@
};
},
props: {
deviceId: {
type: String,
default: null,
},
deviceName: {
type: String,
required: false,
default: null,
},
deviceIcon: {
type: String,
required: false,
default: null,
device: {
type: Object,
required: true,
default: () => ({}),
},
channels: {
type: Array,
Expand All @@ -118,61 +101,36 @@
return [];
},
},
pinIcon: {
type: String,
required: true,
default: null,
},
showDescription: {
type: Boolean,
required: false,
default: false,
},
disablePinDevice: {
pinned: {
type: Boolean,
required: false,
required: true,
default: false,
},
},
computed: {
cardsPerRow() {
if (this.windowIsSmall) {
return 1;
}
if (this.windowBreakpoint < 4) {
return 2;
}
if (this.windowBreakpoint < 6) {
return 3;
}
return 4;
totalChannels() {
return this.channels.length;
},
layoutSpan() {
/**
* The breakpoints below represent the window widths
* 0: < 480px | Small screen | 4 columns
* 1: < 600px | Small screen | 4 columns
* 2: < 840px | Medium screen | 8 columns
* 3: < 960px | Large screen | 12 columns
* 4: < 1280px | Large screen | 12 columns
* 5: < 1440px | Large screen | 12 columns
* 6: < 1600px | Large screen | 12 columns
*
* On resize, display X cards per row where:
* X = total columns in grid / column span for each card.
* For example, if the total number of columns is 12, and
* column span for each cards is 4, then X is 3.
*/
if (this.windowBreakpoint < 2) {
return 4 / this.cardsPerRow;
}
if (this.windowBreakpoint === 2) {
return 8 / this.cardsPerRow;
isStudio() {
return this.deviceId === KolibriStudioId;
},
deviceIcon() {
if (this.device['operating_system'] === 'Android') {
return 'device';
} else if (!this.device['subset_of_users_device']) {
return 'cloud';
} else {
return 'laptop';
}
return 12 / this.cardsPerRow;
},
totalChannels() {
return this.channels.length;
deviceName() {
return this.device ? this.device.device_name : '';
},
deviceId() {
return this.device ? this.device.instance_id : '';
},
pinIcon() {
return this.pinned ? 'pinned' : 'notPinned';
},
},
$trs: {
Expand Down
38 changes: 13 additions & 25 deletions kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,9 @@
<LibraryItem
v-for="device in pinnedDevices"
:key="device['instance_id']"
:deviceId="device['instance_id']"
:deviceName="device['device_name']"
:deviceIcon="getDeviceIcon(device)"
:channels="deviceChannelsMap[device['instance_id']]"
:pinIcon="getPinIcon(true)"
:showDescription="device['instance_id'] === studioId"
:disablePinDevice="device['instance_id'] === studioId"
:device="device"
:channels="deviceChannelsMap[device['instance_id']].slice(0, cardsToDisplay)"
:pinned="true"
@togglePin="handlePinToggle"
/>
<div v-if="areMoreDevicesAvailable" key="moreDevices">
Expand All @@ -52,11 +48,9 @@
<LibraryItem
v-for="device in unpinnedDevices.slice(0, moreDevices)"
:key="device['instance_id']"
:deviceId="device['instance_id']"
:deviceName="device['device_name']"
:deviceIcon="getDeviceIcon(device)"
:channels="deviceChannelsMap[device['instance_id']]"
:pinIcon="getPinIcon(false)"
:device="device"
:channels="deviceChannelsMap[device['instance_id']].slice(0, cardsToDisplay)"
:pinned="false"
@togglePin="handlePinToggle"
/>
</FadeInTransitionGroup>
Expand All @@ -82,6 +76,7 @@
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import commonLearnStrings from '../commonLearnStrings';
import FadeInTransitionGroup from '../FadeInTransitionGroup';
import useCardLayoutSpan from '../../composables/useCardLayoutSpan';
import useContentLink from '../../composables/useContentLink';
import useDevices from '../../composables/useDevices';
import usePinnedDevices from '../../composables/usePinnedDevices';
Expand Down Expand Up @@ -113,6 +108,7 @@
pinnedDevicesExist,
} = usePinnedDevices(networkDevicesWithChannels);
const { back } = useContentLink();
const { makeComputedCardCount } = useCardLayoutSpan();
const moreDevices = ref(0);
keepDeviceChannelsUpdated();
Expand All @@ -123,12 +119,15 @@
watch(pinnedDevicesExist, (newVal, oldVal) => {
if (!oldVal && newVal) {
set(moreDevices, 0);
// Always show at least 4 devices
set(moreDevices, Math.max(moreDevicesIncrement - get(pinnedDevices).length, 0));
} else if (oldVal && !newVal && !get(moreDevices)) {
set(moreDevices, moreDevicesIncrement);
}
});
const cardsToDisplay = makeComputedCardCount(1, 3);
return {
handlePinToggle,
pinnedDevices,
Expand All @@ -140,6 +139,7 @@
back,
loading: isLoadingChannels,
moreDevices,
cardsToDisplay,
};
},
computed: {
Expand All @@ -160,18 +160,6 @@
},
},
methods: {
getDeviceIcon(device) {
if (device['operating_system'] === 'Android') {
return 'device';
} else if (!device['subset_of_users_device']) {
return 'cloud';
} else {
return 'laptop';
}
},
getPinIcon(pinned) {
return pinned ? 'pinned' : 'notPinned';
},
loadMoreDevices() {
this.moreDevices += moreDevicesIncrement;
},
Expand Down

0 comments on commit 90f34dd

Please sign in to comment.