Merge pull request #2834 from rtibbles/master_into_develop

Master into develop

Author: rtibbles

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;