mitri4
/
LilSchool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

LIL-645

Browse Source
remotes/origin/hotfix/LIL-691
gzbender 7 years ago
parent d182e7ccc3
commit 898d5bf3df
7 changed files with 182 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      api/v1/serializers/mixins.py
  2. 12
      web/src/components/CourseRedactor.vue
  3. 36
      web/src/components/blocks/BlockAdd.vue
  4. 28
      web/src/components/blocks/BlockContent.vue
  5. 24
      web/src/components/blocks/BlockImages.vue
  6. 2
      web/src/components/blocks/Image.vue
  7. 186
      web/src/js/modules/api.js

6
api/v1/serializers/mixins.py
Unescape View File

@ -88,7 +88,6 @@ class DispatchContentMixin(object):
g.position = cdata['position'] g.position = cdata['position']
g.title = cdata['title'] g.title = cdata['title']
g.uuid = cdata['uuid'] g.uuid = cdata['uuid']
g.save()
else: else:
g = Gallery( g = Gallery(
position=cdata['position'], position=cdata['position'],
@ -96,8 +95,9 @@ class DispatchContentMixin(object):
uuid=cdata['uuid'], uuid=cdata['uuid'],
) )
setattr(g, obj_type, obj) setattr(g, obj_type, obj)
if 'gallery_images' in cdata: g.save()
for image in cdata['gallery_images']: if 'images' in cdata:
for image in cdata['images']:
if 'img' in image and image['img']: if 'img' in image and image['img']:
if 'id' in image and image['id']: if 'id' in image and image['id']:
gi = GalleryImage.objects.get(id=image['id']) gi = GalleryImage.objects.get(id=image['id'])

12
web/src/components/CourseRedactor.vue
Unescape View File

@ -761,19 +761,19 @@
let remoteDataMapper = {} let remoteDataMapper = {}
if (courseData.content) { if (courseData.content) {
courseData.content.forEach((contentElement) => { courseData.content.forEach((contentElement) => {
remoteUUIDMapper[contentElement.uuid] = contentElement.id; remoteUUIDMapper[contentElement.uuid] = contentElement.data.id;
remoteDataMapper[contentElement.uuid] = contentElement; remoteDataMapper[contentElement.uuid] = contentElement.data;
}) })
} }
this.course.content.forEach((contentElement, index) => { this.course.content.forEach((contentElement, index) => {
if (!contentElement.id) { if (!contentElement.data.id) {
this.$set(this.course.content[index], 'id', remoteUUIDMapper[contentElement.uuid]) this.$set(this.course.content[index].data, 'id', remoteUUIDMapper[contentElement.uuid])
} }
if(contentElement.type === 'images') { if(contentElement.type === 'images') {
remoteDataMapper[contentElement.uuid].gallery_images.forEach((image, imageIndex) => { remoteDataMapper[contentElement.uuid].images.forEach((image, imageIndex) => {
this.$set(this.course.content[index].gallery_images[imageIndex], 'id', image.id) this.$set(this.course.content[index].data.images[imageIndex], 'id', image.id)
}) })
} }
}); });

36
web/src/components/blocks/BlockAdd.vue
Unescape View File

@ -69,38 +69,50 @@
addBlockText() { addBlockText() {
this.add({ this.add({
type: 'text', type: 'text',
title: '', data: {
text: '', title: '',
text: '',
}
}) })
}, },
addBlockImage() { addBlockImage() {
this.add({ this.add({
type: 'image', type: 'image',
title: '', data: {
img: {}, title: '',
image_id: null,
image_url: null,
}
}) })
}, },
addBlockImageText() { addBlockImageText() {
this.add({ this.add({
type: 'image-text', type: 'image-text',
title: '', data: {
img: {}, title: '',
text: '', text: '',
image_id: null,
image_url: null,
}
}) })
}, },
addBlockImages() { addBlockImages() {
this.add({ this.add({
type: 'images', type: 'images',
title: '', data: {
text: '', title: '',
gallery_images: [], text: '',
images: [],
}
}) })
}, },
addBlockVideo() { addBlockVideo() {
this.add({ this.add({
type: 'video', type: 'video',
title: '', data: {
video_url: '', title: '',
video_url: '',
}
}) })
}, },
} }

28
web/src/components/blocks/BlockContent.vue
Unescape View File

@ -4,36 +4,36 @@
<div v-for="(block, index) in content" :key="block.id ? block.id : block.uuid"> <div v-for="(block, index) in content" :key="block.id ? block.id : block.uuid">
<block-text v-if="block.type === 'text'" <block-text v-if="block.type === 'text'"
:index="index" :index="index"
:title.sync="block.title" :title.sync="block.data.title"
:text.sync="block.txt" :text.sync="block.data.text"
v-on:remove="onBlockRemoved"/> v-on:remove="onBlockRemoved"/>
<block-image-text v-if="block.type === 'image-text'" <block-image-text v-if="block.type === 'image-text'"
:index="index" :index="index"
:title.sync="block.title" :title.sync="block.data.title"
:text.sync="block.txt" :text.sync="block.data.text"
:image-id.sync="block.img_id" :image-id.sync="block.data.image_id"
:image-url.sync="block.img_thumbnail" :image-url.sync="block.data.image_thumbnail_url"
v-on:remove="onBlockRemoved" v-on:remove="onBlockRemoved"
:access-token="$root.store.accessToken"/> :access-token="$root.store.accessToken"/>
<block-image v-if="block.type === 'image'" <block-image v-if="block.type === 'image'"
:index="index" :index="index"
:title.sync="block.title" :title.sync="block.data.title"
:image-id.sync="block.img_id" :image-id.sync="block.data.image_id"
:image-url.sync="block.img_thumbnail" :image-url.sync="block.data.image_thumbnail_url"
v-on:remove="onBlockRemoved" v-on:remove="onBlockRemoved"
:access-token="$root.store.accessToken"/> :access-token="$root.store.accessToken"/>
<block-images v-if="block.type === 'images'" <block-images v-if="block.type === 'images'"
:index="index" :index="index"
:title.sync="block.title" :title.sync="block.data.title"
:text.sync="block.text" :text.sync="block.data.text"
:images.sync="block.gallery_images" :images.sync="block.data.images"
v-on:remove="onBlockRemoved" v-on:remove="onBlockRemoved"
:access-token="$root.store.accessToken"/> :access-token="$root.store.accessToken"/>
<block-video v-if="block.type === 'video'" <block-video v-if="block.type === 'video'"
:index="index" :index="index"
:title.sync="block.title" :title.sync="block.data.title"
v-on:remove="onBlockRemoved" v-on:remove="onBlockRemoved"
:video-url.sync="block.video_url"/> :video-url.sync="block.data.video_url"/>
</div> </div>
</vue-draggable> </vue-draggable>

24
web/src/components/blocks/BlockImages.vue
Unescape View File

@ -23,7 +23,7 @@
</div> </div>
<div class="kit__gallery"> <div class="kit__gallery">
<div class="kit__preview" v-for="(image, index) in images" v-bind:class="{ 'kit__preview--loading': image.loading }"> <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)"> <button type="button" @click="onRemoveImage(index)">
<svg class="icon icon-delete"> <svg class="icon icon-delete">
<use xlink:href="/static/img/sprite.svg#icon-delete"></use> <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
@ -51,7 +51,6 @@
this.$emit('update:title', event.target.value); this.$emit('update:title', event.target.value);
}, },
onImageAdded(event) { onImageAdded(event) {
const gallery = this.images[0].gallery;
Array.from(event.target.files).forEach((file) => { Array.from(event.target.files).forEach((file) => {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = () => { reader.onload = () => {
@ -59,12 +58,7 @@
console.log('images before before', JSON.stringify(images)); console.log('images before before', JSON.stringify(images));
images.push({ images.push({
// gallery, src: reader.result,
img_file: reader.result,
/*img: {
id: null,
image_thumbnail: '',
},*/
loading: true, loading: true,
}); });
this.$emit('update:images', images); this.$emit('update:images', images);
@ -72,16 +66,12 @@
api.uploadImage(reader.result, this.accessToken) api.uploadImage(reader.result, this.accessToken)
.then((response) => { .then((response) => {
let images = this.images; let images = this.images;
/*console.log('images before', JSON.stringify(images));
images.push({
gallery,
img: response.data,
});*/
images.forEach((image, index) => { images.forEach((image, index) => {
if (image.img_file === reader.result) { if (image.src === reader.result) {
delete images[index]['img_file']; images[index].image_id = response.data.id;
images[index].img = response.data;
images[index].loading = false; 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)); console.log('images after', JSON.stringify(images));
@ -101,7 +91,7 @@
}, },
onRemoveImage(index) { onRemoveImage(index) {
let images = this.images; let images = this.images;
let id = images[index].img.id; let id = images[index].image_id;
api.removeImage(id, this.accessToken) api.removeImage(id, this.accessToken)
.then(response => { .then(response => {

2
web/src/components/blocks/Image.vue
Unescape View File

@ -46,7 +46,7 @@
.then((response) => { .then((response) => {
this.loading = false; this.loading = false;
this.$emit('update:imageId', response.data.id); this.$emit('update:imageId', response.data.id);
this.$emit('update:imageUrl', response.data.image); this.$emit('update:imageUrl', response.data.image_thumbnail);
}) })
.catch((error) => { .catch((error) => {
this.loading = false; this.loading = false;

186
web/src/js/modules/api.js
Unescape View File

@ -201,26 +201,68 @@ export const api = {
convertContentJson: (contentJson, forSaving) => { convertContentJson: (contentJson, forSaving) => {
if(forSaving){ if(forSaving){
return contentJson.map((block, index) => { return contentJson.map((block, index) => {
const position = ++index; if (block.type === 'text') {
const data = Object.assign({position}, block); return {
if (['image', 'image-text'].indexOf(data.type) > -1) { 'type': 'text',
data.img = data.img && data.img.id; 'data': {
} 'id': block.data.id ? block.data.id : null,
else if (data.type === 'images') { 'uuid': block.uuid,
data.gallery_images = data.gallery_images.map(image => { 'position': ++index,
return { 'title': block.data.title,
id: image.id, 'txt': block.data.text,
img: image.img && image.img.id, }
}; }
}); } else if (block.type === 'image') {
} return {
else if (data.type === 'video') { 'type': 'image',
data.url = data.video_url; '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) => { return contentJson.sort((a, b) => {
@ -231,44 +273,70 @@ export const api = {
return 1; return 1;
} }
return 0; return 0;
}).map(block => { }).map((contentItem) => {
/*const templates = { if (contentItem.type === 'text') {
image: { return {
img: {}, 'type': 'text',
}, 'uuid': contentItem.uuid,
'image-text': { 'data': {
txt: '', 'id': contentItem.id ? contentItem.id : null,
img: {}, 'title': contentItem.title,
}, 'text': contentItem.txt,
images: { }
gallery_images: [],
},
video: {
video_url: '',
},
text: {
txt: '',
} }
} } else if (contentItem.type === 'image') {
return Object.assign({ return {
type: '', id: null, uuid: '', title: '', 'type': 'image',
}, templates[block.type], block);*/ 'uuid': contentItem.uuid,
let data = Object.assign({}, block); 'data': {
if(data.type == 'image' || data.type == 'image-text'){ 'id': contentItem.id ? contentItem.id : null,
data.img_id = data.img.id; 'title': contentItem.title,
data.img_thumbnail = data.img.image_thumbnail; 'image_id': (contentItem.img) ? contentItem.img.id:null,
delete data.img; 'image_url': (contentItem.img) ? contentItem.img.image:null,
} 'image_thumbnail_url': (contentItem.img) ? contentItem.img.image_thumbnail:null,
else if(data.type === 'images'){ }
data.gallery_images = data.gallery_images.map(galleryImage => { }
return { } else if (contentItem.type === 'image-text') {
'id': galleryImage.id ? galleryImage.id : null, return {
'img_id': galleryImage.img.id, 'type': 'image-text',
img_thumbnail: galleryImage.img.img_thumbnail, '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) => { addCourse: (courseJson, accessToken) => {
@ -331,19 +399,19 @@ export const api = {
let removeUrl; let removeUrl;
switch(blockData.type) { switch(blockData.type) {
case 'text': case 'text':
removeUrl = `/api/v1/texts/${blockData.id}/`; removeUrl = `/api/v1/texts/${blockData.data.id}/`;
break; break;
case 'image': case 'image':
removeUrl = `/api/v1/images/${blockData.id}/`; removeUrl = `/api/v1/images/${blockData.data.id}/`;
break; break;
case 'image-text': case 'image-text':
removeUrl = `/api/v1/image-texts/${blockData.id}/`; removeUrl = `/api/v1/image-texts/${blockData.data.id}/`;
break; break;
case 'images': case 'images':
removeUrl = `/api/v1/galleries/${blockData.id}/`; removeUrl = `/api/v1/galleries/${blockData.data.id}/`;
break; break;
case 'video': case 'video':
removeUrl = `/api/v1/videos/${blockData.id}/`; removeUrl = `/api/v1/videos/${blockData.data.id}/`;
break; break;
} }
if (!removeUrl) { if (!removeUrl) {

Write Preview
Loading…
Cancel
Save