From 898d5bf3df2230722c12aaeaf0f16b8a4e462ab8 Mon Sep 17 00:00:00 2001
From: gzbender <gzbender74@gmail.com>
Date: Fri, 21 Sep 2018 15:56:44 +0500
Subject: [PATCH] LIL-645

---
 api/v1/serializers/mixins.py               |   6 +-
 web/src/components/CourseRedactor.vue      |  12 +-
 web/src/components/blocks/BlockAdd.vue     |  36 ++--
 web/src/components/blocks/BlockContent.vue |  28 ++--
 web/src/components/blocks/BlockImages.vue  |  24 +--
 web/src/components/blocks/Image.vue        |   2 +-
 web/src/js/modules/api.js                  | 186 ++++++++++++++-------
 7 files changed, 182 insertions(+), 112 deletions(-)

diff --git a/api/v1/serializers/mixins.py b/api/v1/serializers/mixins.py
index d75cbd12..50e7d19d 100644
--- a/api/v1/serializers/mixins.py
+++ b/api/v1/serializers/mixins.py
@@ -88,7 +88,6 @@ class DispatchContentMixin(object):
                     g.position = cdata['position']
                     g.title = cdata['title']
                     g.uuid = cdata['uuid']
-                    g.save()
                 else:
                     g = Gallery(
                         position=cdata['position'],
@@ -96,8 +95,9 @@ class DispatchContentMixin(object):
                         uuid=cdata['uuid'],
                     )
                 setattr(g, obj_type, obj)
-                if 'gallery_images' in cdata:
-                    for image in cdata['gallery_images']:
+                g.save()
+                if 'images' in cdata:
+                    for image in cdata['images']:
                         if 'img' in image and image['img']:
                             if 'id' in image and image['id']:
                                 gi = GalleryImage.objects.get(id=image['id'])
diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue
index 70a8971e..0f5ae924 100644
--- a/web/src/components/CourseRedactor.vue
+++ b/web/src/components/CourseRedactor.vue
@@ -761,19 +761,19 @@
                             let remoteDataMapper = {}
                             if (courseData.content) {
                               courseData.content.forEach((contentElement) => {
-                                  remoteUUIDMapper[contentElement.uuid] = contentElement.id;
-                                  remoteDataMapper[contentElement.uuid] = contentElement;
+                                  remoteUUIDMapper[contentElement.uuid] = contentElement.data.id;
+                                  remoteDataMapper[contentElement.uuid] = contentElement.data;
                               })
                             }
 
                             this.course.content.forEach((contentElement, index) => {
-                                if (!contentElement.id) {
-                                    this.$set(this.course.content[index], 'id', remoteUUIDMapper[contentElement.uuid])
+                                if (!contentElement.data.id) {
+                                    this.$set(this.course.content[index].data, 'id', remoteUUIDMapper[contentElement.uuid])
                                 }
 
                                 if(contentElement.type === 'images') {
-                                    remoteDataMapper[contentElement.uuid].gallery_images.forEach((image, imageIndex) => {
-                                        this.$set(this.course.content[index].gallery_images[imageIndex], 'id', image.id)
+                                    remoteDataMapper[contentElement.uuid].images.forEach((image, imageIndex) => {
+                                        this.$set(this.course.content[index].data.images[imageIndex], 'id', image.id)
                                     })
                                 }
                             });
diff --git a/web/src/components/blocks/BlockAdd.vue b/web/src/components/blocks/BlockAdd.vue
index 6720b6da..0090a8df 100644
--- a/web/src/components/blocks/BlockAdd.vue
+++ b/web/src/components/blocks/BlockAdd.vue
@@ -69,38 +69,50 @@
             addBlockText() {
                 this.add({
                     type: 'text',
-                    title: '',
-                    text: '',
+                    data: {
+                        title: '',
+                        text: '',
+                    }
                 })
             },
             addBlockImage() {
                 this.add({
                     type: 'image',
-                    title: '',
-                    img: {},
+                    data: {
+                        title: '',
+                        image_id: null,
+                        image_url: null,
+                    }
                 })
             },
             addBlockImageText() {
                 this.add({
                     type: 'image-text',
-                    title: '',
-                    img: {},
-                    text: '',
+                    data: {
+                        title: '',
+                        text: '',
+                        image_id: null,
+                        image_url: null,
+                    }
                 })
             },
             addBlockImages() {
                 this.add({
                     type: 'images',
-                    title: '',
-                    text: '',
-                    gallery_images: [],
+                    data: {
+                        title: '',
+                        text: '',
+                        images: [],
+                    }
                 })
             },
             addBlockVideo() {
                 this.add({
                     type: 'video',
-                    title: '',
-                    video_url: '',
+                    data: {
+                        title: '',
+                        video_url: '',
+                    }
                 })
             },
         }
diff --git a/web/src/components/blocks/BlockContent.vue b/web/src/components/blocks/BlockContent.vue
index eeb88314..551d6d9b 100644
--- a/web/src/components/blocks/BlockContent.vue
+++ b/web/src/components/blocks/BlockContent.vue
@@ -4,36 +4,36 @@
     <div v-for="(block, index) in content" :key="block.id ? block.id : block.uuid">
       <block-text v-if="block.type === 'text'"
                   :index="index"
-                  :title.sync="block.title"
-                  :text.sync="block.txt"
+                  :title.sync="block.data.title"
+                  :text.sync="block.data.text"
                   v-on:remove="onBlockRemoved"/>
       <block-image-text v-if="block.type === 'image-text'"
                         :index="index"
-                        :title.sync="block.title"
-                        :text.sync="block.txt"
-                        :image-id.sync="block.img_id"
-                        :image-url.sync="block.img_thumbnail"
+                        :title.sync="block.data.title"
+                        :text.sync="block.data.text"
+                        :image-id.sync="block.data.image_id"
+                        :image-url.sync="block.data.image_thumbnail_url"
                         v-on:remove="onBlockRemoved"
                         :access-token="$root.store.accessToken"/>
       <block-image v-if="block.type === 'image'"
                    :index="index"
-                   :title.sync="block.title"
-                   :image-id.sync="block.img_id"
-                   :image-url.sync="block.img_thumbnail"
+                   :title.sync="block.data.title"
+                   :image-id.sync="block.data.image_id"
+                   :image-url.sync="block.data.image_thumbnail_url"
                    v-on:remove="onBlockRemoved"
                    :access-token="$root.store.accessToken"/>
       <block-images v-if="block.type === 'images'"
                     :index="index"
-                    :title.sync="block.title"
-                    :text.sync="block.text"
-                    :images.sync="block.gallery_images"
+                    :title.sync="block.data.title"
+                    :text.sync="block.data.text"
+                    :images.sync="block.data.images"
                     v-on:remove="onBlockRemoved"
                     :access-token="$root.store.accessToken"/>
       <block-video v-if="block.type === 'video'"
                    :index="index"
-                   :title.sync="block.title"
+                   :title.sync="block.data.title"
                    v-on:remove="onBlockRemoved"
-                   :video-url.sync="block.video_url"/>
+                   :video-url.sync="block.data.video_url"/>
     </div>
   </vue-draggable>
 
diff --git a/web/src/components/blocks/BlockImages.vue b/web/src/components/blocks/BlockImages.vue
index ba2c14d4..80f3a8ab 100644
--- a/web/src/components/blocks/BlockImages.vue
+++ b/web/src/components/blocks/BlockImages.vue
@@ -23,7 +23,7 @@
     </div>
     <div class="kit__gallery">
       <div class="kit__preview" v-for="(image, index) in images" v-bind:class="{ 'kit__preview--loading': image.loading }">
-        <img v-if="image.img && image.img.image_thumbnail" :src="image.img.image_thumbnail" class="kit__pic">
+        <img :src="image.image_thumbnail_url" class="kit__pic">
         <button type="button" @click="onRemoveImage(index)">
           <svg class="icon icon-delete">
             <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
@@ -51,7 +51,6 @@
                 this.$emit('update:title', event.target.value);
             },
             onImageAdded(event) {
-                const gallery = this.images[0].gallery;
                 Array.from(event.target.files).forEach((file) => {
                     let reader = new FileReader();
                     reader.onload = () => {
@@ -59,12 +58,7 @@
                         console.log('images before before', JSON.stringify(images));
 
                         images.push({
-                            // gallery,
-                            img_file: reader.result,
-                            /*img: {
-                                id: null,
-                                image_thumbnail: '',
-                            },*/
+                            src: reader.result,
                             loading: true,
                         });
                         this.$emit('update:images', images);
@@ -72,16 +66,12 @@
                         api.uploadImage(reader.result, this.accessToken)
                             .then((response) => {
                                 let images = this.images;
-                                /*console.log('images before', JSON.stringify(images));
-                                images.push({
-                                    gallery,
-                                    img: response.data,
-                                });*/
                                 images.forEach((image, index) => {
-                                    if (image.img_file === reader.result) {
-                                        delete images[index]['img_file'];
-                                        images[index].img = response.data;
+                                    if (image.src === reader.result) {
+                                        images[index].image_id = response.data.id;
                                         images[index].loading = false;
+                                        images[index].image_url = response.data.image;
+                                        images[index].image_thumbnail_url = response.data.image_thumbnail;
                                     }
                                 });
                                 console.log('images after', JSON.stringify(images));
@@ -101,7 +91,7 @@
             },
             onRemoveImage(index) {
                 let images = this.images;
-                let id = images[index].img.id;
+                let id = images[index].image_id;
 
                 api.removeImage(id, this.accessToken)
                     .then(response => {
diff --git a/web/src/components/blocks/Image.vue b/web/src/components/blocks/Image.vue
index 234a2c2e..81436fbf 100644
--- a/web/src/components/blocks/Image.vue
+++ b/web/src/components/blocks/Image.vue
@@ -46,7 +46,7 @@
                                 .then((response) => {
                                     this.loading = false;
                                     this.$emit('update:imageId', response.data.id);
-                                    this.$emit('update:imageUrl', response.data.image);
+                                    this.$emit('update:imageUrl', response.data.image_thumbnail);
                                 })
                                 .catch((error) => {
                                     this.loading = false;
diff --git a/web/src/js/modules/api.js b/web/src/js/modules/api.js
index e486e604..9ce588a6 100644
--- a/web/src/js/modules/api.js
+++ b/web/src/js/modules/api.js
@@ -201,26 +201,68 @@ export const api = {
     convertContentJson: (contentJson, forSaving) => {
         if(forSaving){
             return contentJson.map((block, index) => {
-                const position = ++index;
-                const data = Object.assign({position}, block);
-                if (['image', 'image-text'].indexOf(data.type) > -1) {
-                    data.img = data.img && data.img.id;
-                }
-                else if (data.type === 'images') {
-                    data.gallery_images = data.gallery_images.map(image => {
-                        return {
-                            id: image.id,
-                            img: image.img && image.img.id,
-                        };
-                    });
-                }
-                else if (data.type === 'video') {
-                    data.url = data.video_url;
+                if (block.type === 'text') {
+                    return {
+                        'type': 'text',
+                        'data': {
+                            'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
+                            'position': ++index,
+                            'title': block.data.title,
+                            'txt': block.data.text,
+                        }
+                    }
+                } else if (block.type === 'image') {
+                    return {
+                        'type': 'image',
+                        'data': {
+                            'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
+                            'position': ++index,
+                            'title': block.data.title,
+                            'img': block.data.image_id,
+                        }
+                    }
+                } else if (block.type === 'image-text') {
+                    return {
+                        'type': 'image-text',
+                        'data': {
+                            'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
+                            'position': ++index,
+                            'title': block.data.title,
+                            'img': block.data.image_id,
+                            'txt': block.data.text,
+                        }
+                    }
+                } else if (block.type === 'images') {
+                    return {
+                        'type': 'images',
+                        'data': {
+                            'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
+                            'position': ++index,
+                            'title': block.data.title,
+                            'images': block.data.images.map((galleryImage) => {
+                                return {
+                                    'id': galleryImage.id ? galleryImage.id : null,
+                                    'img': galleryImage.image_id,
+                                }
+                            }),
+                        }
+                    }
+                } else if (block.type === 'video') {
+                    return {
+                        'type': 'video',
+                        'data': {
+                            'id': block.data.id ? block.data.id : null,
+                            'uuid': block.uuid,
+                            'position': ++index,
+                            'title': block.data.title,
+                            'url': block.data.video_url,
+                        }
+                    }
                 }
-                return {
-                    type: block.type,
-                    data: data,
-                };
             });
         }
         return contentJson.sort((a, b) => {
@@ -231,44 +273,70 @@ export const api = {
                 return 1;
             }
             return 0;
-        }).map(block => {
-            /*const templates = {
-                image: {
-                    img: {},
-                },
-                'image-text': {
-                    txt: '',
-                    img: {},
-                },
-                images: {
-                    gallery_images: [],
-                },
-                video: {
-                    video_url: '',
-                },
-                text: {
-                    txt: '',
+        }).map((contentItem) => {
+            if (contentItem.type === 'text') {
+                return {
+                    'type': 'text',
+                    'uuid': contentItem.uuid,
+                    'data': {
+                        'id': contentItem.id ? contentItem.id : null,
+                        'title': contentItem.title,
+                        'text': contentItem.txt,
+                    }
                 }
-            }
-            return Object.assign({
-                type: '', id: null, uuid: '', title: '',
-            }, templates[block.type], block);*/
-            let data = Object.assign({}, block);
-            if(data.type == 'image' || data.type == 'image-text'){
-                data.img_id = data.img.id;
-                data.img_thumbnail = data.img.image_thumbnail;
-                delete data.img;
-            }
-            else if(data.type === 'images'){
-                data.gallery_images = data.gallery_images.map(galleryImage => {
-                    return {
-                        'id': galleryImage.id ? galleryImage.id : null,
-                        'img_id': galleryImage.img.id,
-                        img_thumbnail: galleryImage.img.img_thumbnail,
+            } else if (contentItem.type === 'image') {
+                return {
+                    'type': 'image',
+                    'uuid': contentItem.uuid,
+                    'data': {
+                        'id': contentItem.id ? contentItem.id : null,
+                        'title': contentItem.title,
+                        'image_id': (contentItem.img) ? contentItem.img.id:null,
+                        'image_url': (contentItem.img) ? contentItem.img.image:null,
+                        'image_thumbnail_url': (contentItem.img) ? contentItem.img.image_thumbnail:null,
+                    }
+                }
+            } else if (contentItem.type === 'image-text') {
+                return {
+                    'type': 'image-text',
+                    'uuid': contentItem.uuid,
+                    'data': {
+                        'id': contentItem.id ? contentItem.id : null,
+                        'title': contentItem.title,
+                        'image_id': (contentItem.img) ? contentItem.img.id:null,
+                        'image_url': (contentItem.img) ? contentItem.img.image:null,
+                        'image_thumbnail_url': (contentItem.img) ? contentItem.img.image_thumbnail:null,
+                        'text': contentItem.txt,
                     }
-                });
+                }
+            } else if (contentItem.type === 'images') {
+                return {
+                    'type': 'images',
+                    'uuid': contentItem.uuid,
+                    'data': {
+                        'id': contentItem.id ? contentItem.id : null,
+                        'title': contentItem.title,
+                        'images': contentItem.gallery_images.map((galleryImage) => {
+                            return {
+                                'id': galleryImage.id,
+                                'image_id': galleryImage.img.id,
+                                'image_url': galleryImage.img.image,
+                                'image_thumbnail_url': galleryImage.img.image_thumbnail,
+                            }
+                        }),
+                    }
+                }
+            } else if (contentItem.type === 'video') {
+                return {
+                    'type': 'video',
+                    'uuid': contentItem.uuid,
+                    'data': {
+                        'id': contentItem.id ? contentItem.id : null,
+                        'title': contentItem.title,
+                        'video_url': contentItem.url,
+                    }
+                }
             }
-            return data;
         });
     },
     addCourse: (courseJson, accessToken) => {
@@ -331,19 +399,19 @@ export const api = {
         let removeUrl;
         switch(blockData.type) {
             case 'text':
-                removeUrl = `/api/v1/texts/${blockData.id}/`;
+                removeUrl = `/api/v1/texts/${blockData.data.id}/`;
                 break;
             case 'image':
-                removeUrl = `/api/v1/images/${blockData.id}/`;
+                removeUrl = `/api/v1/images/${blockData.data.id}/`;
                 break;
             case 'image-text':
-                removeUrl = `/api/v1/image-texts/${blockData.id}/`;
+                removeUrl = `/api/v1/image-texts/${blockData.data.id}/`;
                 break;
             case 'images':
-                removeUrl = `/api/v1/galleries/${blockData.id}/`;
+                removeUrl = `/api/v1/galleries/${blockData.data.id}/`;
                 break;
             case 'video':
-                removeUrl = `/api/v1/videos/${blockData.id}/`;
+                removeUrl = `/api/v1/videos/${blockData.data.id}/`;
                 break;
         }
         if (!removeUrl) {