Master into develop

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue

@@ -331,7 +331,7 @@
     transition: background-color ease 500ms;
 
     .highlight & {
-      background-color: #e3f0ed;
+      background-color: var(--v-greenHighlightBackground-base);
     }
 
     &__action,

contentcuration/contentcuration/frontend/channelEdit/components/ResourcePanel.vue

@@ -433,7 +433,7 @@
           return '';
         }
 
-        const masteryModel = this.node.extra_fields.type;
+        const masteryModel = this.node.extra_fields.mastery_model;
         if (!masteryModel) {
           return this.defaultText;
         } else if (masteryModel === MasteryModelsNames.M_OF_N) {

contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue

@@ -14,12 +14,13 @@
 
       <!-- Basic information section -->
       <VLayout row wrap class="section">
-        <VFlex v-if="oneSelected" xs12>
+        <VFlex xs12>
           <h1 class="subheading">
             {{ $tr('basicInfoHeader') }}
           </h1>
           <!-- Title -->
           <VTextField
+            v-if="oneSelected"
             ref="title"
             v-model="title"
             maxlength="200"
@@ -33,6 +34,7 @@
           />
           <!-- Description -->
           <VTextarea
+            v-if="oneSelected"
             ref="description"
             v-model="description"
             :label="$tr('descriptionLabel')"
@@ -187,6 +189,7 @@
               :placeholder="getPlaceholder('author')"
               :value="author && author.toString()"
               @input.native="e => author = e.srcElement.value"
+              @input="author = $event"
               @focus="trackClick('Author')"
             >
               <template v-slot:append-outer>
@@ -207,6 +210,7 @@
               box
               :value="provider && provider.toString()"
               @input.native="e => provider = e.srcElement.value"
+              @input="provider = $event"
               @focus="trackClick('Provider')"
             >
               <template v-slot:append-outer>
@@ -227,6 +231,7 @@
               box
               :value="aggregator && aggregator.toString()"
               @input.native="e => aggregator = e.srcElement.value"
+              @input="aggregator = $event"
               @focus="trackClick('Aggregator')"
             >
               <template v-slot:append-outer>
@@ -262,7 +267,7 @@
               box
               :value="copyright_holder && copyright_holder.toString()"
               @input.native="e => copyright_holder = e.srcElement.value"
-              @input="e => copyright_holder = e"
+              @input="copyright_holder = $event"
               @focus="trackClick('Copyright holder')"
             />
           </VFlex>
@@ -425,7 +430,7 @@
       role: generateGetterSetter('role_visibility'),
       language: generateGetterSetter('language'),
       mastery_model() {
-        return this.getExtraFieldsValueFromNodes('type');
+        return this.getExtraFieldsValueFromNodes('mastery_model');
       },
       m() {
         return this.getExtraFieldsValueFromNodes('m');
@@ -436,7 +441,7 @@
       masteryModelItem: {
         get() {
           return {
-            type: this.mastery_model,
+            mastery_model: this.mastery_model,
             m: this.m,
             n: this.n,
           };

contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/data.js

@@ -28,7 +28,7 @@ export function generateNode(props = {}) {
   });
 
   let extra_fields = {
-    type: 'do_all',
+    mastery_model: 'do_all',
     randomize: false,
   };
 

contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/detailsTabView.spec.js

@@ -83,7 +83,7 @@ describe.skip('detailsTabView', () => {
         role: DEFAULT_EXERCISE.role_visibility,
         randomizeOrder: DEFAULT_EXERCISE.extra_fields.randomize,
         masteryModel: {
-          type: DEFAULT_EXERCISE.extra_fields.type,
+          mastery_model: DEFAULT_EXERCISE.extra_fields.mastery_model,
         },
         copyrightHolder: DEFAULT_EXERCISE.copyright_holder,
       });
@@ -146,7 +146,7 @@ describe.skip('detailsTabView', () => {
     });
     it('exercise fields should set selected node data extra_fields', () => {
       wrapper.find({ ref: 'mastery_model' }).vm.$emit('input', { type: 'm_of_n' });
-      expect(wrapper.vm.masteryModel.type).toEqual('m_of_n');
+      expect(wrapper.vm.masteryModel.mastery_model).toEqual('m_of_n');
     });
   });
   describe('on validation', () => {

contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue

@@ -42,6 +42,10 @@
       @load="loading = false"
     ></iframe>
     <embed v-else-if="isPDF" :src="src" :type="file.mimetype" @load="loading = false">
+    <div v-else-if="isEpub" class="epub">
+      <EpubRenderer :src="src" @load="loading = false" />
+    </div>
+
     <VCard v-else class="message-card" flat>
       <VLayout align-center justify-center fill-height data-test="not-supported">
         <VTooltip bottom>
@@ -63,12 +67,14 @@
   import uniqBy from 'lodash/uniqBy';
   import sortBy from 'lodash/sortBy';
   import { mapGetters } from 'vuex';
+  import EpubRenderer from './EpubRenderer';
   import FileStatus from 'shared/views/files/FileStatus';
 
   export default {
     name: 'ContentRenderer',
     components: {
       FileStatus,
+      EpubRenderer,
     },
     props: {
       fileId: {
@@ -117,6 +123,9 @@
       isPDF() {
         return this.file.file_format === 'pdf';
       },
+      isEpub() {
+        return this.file.file_format === 'epub';
+      },
       htmlPath() {
         return `/zipcontent/${this.file.checksum}.${this.file.file_format}`;
       },
@@ -145,14 +154,16 @@
   video,
   audio,
   embed,
-  iframe {
+  iframe,
+  .epub {
     width: 100%;
     outline: none;
   }
   .v-card,
   .v-card > .layout,
   embed,
-  iframe {
+  iframe,
+  .epub {
     min-height: 200px;
     max-height: @max-height;
   }
@@ -162,7 +173,8 @@
   .message-card,
   video,
   embed,
-  iframe {
+  iframe,
+  .epub {
     border-color: var(--v-greyBorder-base) !important;
     border-style: solid;
     border-width: 1px;
@@ -173,7 +185,8 @@
     .v-card,
     audio,
     embed,
-    iframe {
+    iframe,
+    .epub {
       min-height: @max-height;
     }
   }

contentcuration/contentcuration/frontend/channelEdit/views/files/EpubRenderer.vue

@@ -0,0 +1,71 @@
+<template>
+
+  <VLayout align-center fill-height row style="background-color: white;">
+    <VFlex shrink class="px-2">
+      <IconButton
+        icon="chevronLeft"
+        text=""
+        size="small"
+        rtlFlip
+        @click="rendition.prev()"
+      />
+    </VFlex>
+    <div ref="epub" :style="{ height: '100%', width }"></div>
+    <VFlex shrink class="px-2">
+      <IconButton
+        icon="chevronRight"
+        text=""
+        size="small"
+        rtlFlip
+        @click="rendition.next()"
+      />
+    </VFlex>
+  </VLayout>
+
+</template>
+
+<script>
+
+  import ePub from 'epubjs';
+  import IconButton from 'shared/views/IconButton';
+
+  export default {
+    name: 'EpubRenderer',
+    components: {
+      IconButton,
+    },
+    props: {
+      src: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        book: null,
+        rendition: null,
+      };
+    },
+    computed: {
+      width() {
+        return 'calc(100% - 96px)';
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.book = ePub(this.src);
+        this.rendition = this.book.renderTo(this.$refs.epub, {
+          manager: 'continuous',
+          flow: 'paginated',
+          width: this.width,
+          height: '100%',
+        });
+        const displayed = this.rendition.display();
+        displayed.then(() => {
+          this.$emit('load');
+        });
+      }, 1000); // There seems to be some lag for loading, so add delay to be safe
+    },
+  };
+
+</script>

contentcuration/contentcuration/frontend/channelEdit/views/files/FilePreview.vue

@@ -96,10 +96,6 @@
       isAudio() {
         return this.file.file_format === 'mp3';
       },
-      isEPub() {
-        // TODO: Remove once epub previewer is available
-        return this.file.file_format === 'epub';
-      },
       isZip() {
         return this.file.file_format === 'zip';
       },
@@ -110,7 +106,6 @@
           this.file.url &&
           this.isPreviewable &&
           !this.isAudio &&
-          !this.isEPub &&
           !this.file.uploading
         );
       },

contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js

@@ -169,6 +169,9 @@ export function createContentNode(context, { parent, kind, ...payload }) {
     tags: {},
     extra_fields: {},
     [NEW_OBJECT]: true,
+    total_count: 0,
+    resource_count: 0,
+    complete: false,
     changed: true,
     language: session.preferences ? session.preferences.language : session.currentLanguage,
     parent,
@@ -243,8 +246,8 @@ function generateContentNodeData({
   }
   if (extra_fields !== NOVALUE) {
     contentNodeData.extra_fields = contentNodeData.extra_fields || {};
-    if (extra_fields.type) {
-      contentNodeData.extra_fields.type = extra_fields.type;
+    if (extra_fields.mastery_model) {
+      contentNodeData.extra_fields.mastery_model = extra_fields.mastery_model;
     }
     if (extra_fields.m) {
       contentNodeData.extra_fields.m = extra_fields.m;

contentcuration/contentcuration/frontend/channelList/constants.js

@@ -34,3 +34,5 @@ export const ListTypeToRouteMapping = {
 };
 
 export const RouteToListTypeMapping = invert(ListTypeToRouteMapping);
+
+export const CHANNEL_PAGE_SIZE = 25;

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

@@ -2,7 +2,7 @@
 
   <VCard
     class="channel my-3"
-    :class="{ hideHighlight }"
+    :class="{ hideHighlight, added }"
     data-test="channel-card"
     tabindex="0"
     :href="linkToChannelTree ? channelHref : null"
@@ -226,7 +226,7 @@
 
 <script>
 
-  import { mapActions, mapGetters } from 'vuex';
+  import { mapActions, mapGetters, mapMutations } from 'vuex';
   import { RouterNames } from '../../constants';
   import ChannelStar from './ChannelStar';
   import PrimaryDialog from 'shared/views/PrimaryDialog';
@@ -267,6 +267,7 @@
         deleteDialog: false,
         tokenDialog: false,
         hideHighlight: false,
+        added: false,
       };
     },
     computed: {
@@ -339,8 +340,18 @@
         return !this.channel.last_published || this.channel.modified > this.channel.last_published;
       },
     },
+    mounted() {
+      if (this.channel.added) {
+        this.added = true;
+        setTimeout(() => {
+          this.updateChannel({ id: this.channel.id, added: false });
+          this.added = false;
+        }, 2500);
+      }
+    },
     methods: {
       ...mapActions('channel', ['deleteChannel']),
+      ...mapMutations('channel', { updateChannel: 'UPDATE_CHANNEL' }),
       handleDelete() {
         this.deleteChannel(this.channelId).then(() => {
           this.deleteDialog = false;
@@ -394,6 +405,9 @@
     &:hover:not(.hideHighlight) {
       background-color: var(--v-greyBackground-base);
     }
+    &.added {
+      background-color: var(--v-greenHighlightBackground-base);
+    }
   }
 
   .card-header {