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
Split 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.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'])

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

@ -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)
})
}
});

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

@ -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: '',
}
})
},
}

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">
<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>

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

@ -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 => {

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

@ -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;

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

@ -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) {

Write Preview
Loading…
Cancel
Save