LIL-515 Превью при создании урока курса

web/src/components/LessonRedactor.vue

@@ -14,16 +14,22 @@
         </div>
         <div class="kit__title title">{{ title }}</div>
         <div class="kit__section">
-          <div class="kit__field field"
-               v-bind:class="{ error: $v.currentLesson.title.$invalid }">
-            <div class="field__wrap">
-              <input type="text" class="field__input" placeholder="Название урока" v-model="lesson.title">
-            </div>
-          </div>
-          <div class="kit__field field"
-               v-bind:class="{ error: $v.currentLesson.short_description.$invalid }">
-            <div class="field__wrap">
-              <textarea class="field__input" v-autosize="lesson.short_description" placeholder="Описание урока" v-model="lesson.short_description"></textarea>
+          <div class="kit__row">
+            <lil-image :image-id.sync="lesson.coverImageId" :image-url.sync="lesson.coverImage"
+                 v-on:update:imageUrl="onUpdateCoverUrl" v-on:update:imageId="onUpdateCoverId" :access-token="accessToken"/>
+            <div class="kit__fieldset">
+              <div class="kit__field field"
+                   v-bind:class="{ error: $v.currentLesson.title.$invalid }">
+                <div class="field__wrap">
+                  <input type="text" class="field__input" placeholder="Название урока" v-model="lesson.title">
+                </div>
+              </div>
+              <div class="kit__field field"
+                   v-bind:class="{ error: $v.currentLesson.short_description.$invalid }">
+                <div class="field__wrap">
+                  <textarea class="field__input" v-autosize="lesson.short_description" placeholder="Описание урока" v-model="lesson.short_description"></textarea>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -81,6 +87,7 @@
     import BlockImages from './blocks/BlockImages'
     import BlockImageText from './blocks/BlockImageText'
     import BlockVideo from './blocks/BlockVideo'
+    import LilImage from "./blocks/Image"
     import {api} from "../js/modules/api";
     import Draggable from 'vuedraggable';
     import _ from 'lodash'
@@ -105,7 +112,13 @@
                 if (blockToRemove.data.id) {
                     api.removeContentBlock(blockToRemove, this.accessToken);
                 }
-            }
+            },
+            onUpdateCoverUrl(newValue) {
+                this.lesson.coverImage = newValue;
+            },
+            onUpdateCoverId(newValue) {
+                this.lesson.coverImageId = newValue;
+            },
         },
         computed: {
             title() {
@@ -120,10 +133,11 @@
             'block-images': BlockImages,
             'block-video': BlockVideo,
             'vue-draggable': Draggable,
+            'lil-image': LilImage,
         }
     }
 </script>
 
 <style scoped>
 
-</style>
+</style>

web/src/js/modules/api.js

@@ -204,6 +204,7 @@ export const api = {
         const isAdding = (!lessonObject.hasOwnProperty('id') || !lessonObject.hasOwnProperty('id'));
 
         const lessonJson = {
+            cover: lessonObject.coverImageId ? lessonObject.coverImageId : null,
             title: lessonObject.title,
             short_description: lessonObject.short_description,
             course: lessonObject.course_id,
@@ -284,6 +285,8 @@ export const api = {
             id: lessonJSON.id,
             title: lessonJSON.title,
             short_description: lessonJSON.short_description,
+            coverImageId: lessonJSON.cover && lessonJSON.cover.id ? lessonJSON.cover.id : null,
+            coverImage: lessonJSON.cover && lessonJSON.cover.image ? lessonJSON.cover.image : null,
             content: api.convertContentResponse(lessonJSON.content)
         }
     },