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

lesson validation, some fixes

Browse Source
remotes/origin/hasaccess
Sanasol 8 years ago
parent 1e6be25a57
commit 3a02e5b942
2 changed files with 176 additions and 96 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. 199
      web/src/components/CourseRedactor.vue
  2. 73
      web/src/components/LessonRedactor.vue

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

@ -12,9 +12,7 @@
</div>
<div v-if="me" class="info__group info__field--light">
<div class="info__label">АВТОР</div>
<div v-if="me.role != ROLE_ADMIN" class="info__value">{{ authorName }}</div>
<div v-else class="info__value"><lil-select :value.sync="userSelect" :options="users"
placeholder="Выберите автора"/></div>
<div class="info__value">{{ authorName }}</div>
</div>
</div>
<div class="info__upload upload">
@ -246,8 +244,8 @@
</div>
</form>
<form v-if="viewSection === 'lessons-edit'" @submit.prevent="onLessonSubmit">
<lesson-redactor :lesson.sync="currentLesson" :saving="lessonSaving" :access-token="accessToken"
v-on:back="goToLessons"/>
<lesson-redactor :$v="$v" :lesson.sync="currentLesson" :saving.sync="lessonSaving" :access-token="accessToken"
v-on:back="goToLessons" />
</form>
</div>
<div v-else>
@ -304,9 +302,9 @@
status: null,
category: null,
categorySelect: null,
duration: 1,
duration: null,
author: null,
price: 0,
price: null,
url: '',
coverImage: '',
coverImageId: null,
@ -390,6 +388,10 @@
duration: "Продолжительность",
category: "Категория",
},
lessonFields: {
title: "Название урока",
short_description: "Описание урока",
},
showErrors: false,
savingTimeout: null,
savingDebounceTimeout: null,
@ -435,8 +437,16 @@
required,
numeric,
minValue: minValue(1)
}
},
},
currentLesson: {
title: {
required
},
short_description: {
required
},
}
};
}
},
@ -541,12 +551,18 @@
});
},
onLessonSubmit() {
if(!this.validateLesson()) {
return;
}
this.saveLesson();
},
saveLesson() {
this.lessonSaving = true;
const currentLessonId = this.currentLesson.id;
this.currentLesson.course_id = this.course.id;
api.saveLesson(this.currentLesson, this.accessToken)
.then((response) => {
this.lessonSaving = false;
const newLesson = api.convertLessonJson(response.data);
newLesson.course_id = this.course.id;
this.currentLesson = newLesson;
@ -556,13 +572,39 @@
if (this.lessons && Array.isArray(this.lessons)) {
this.lessons.forEach((lesson, index) => {
if (newLesson.id === lesson.id) {
this.$set('lessons', index, newLesson);
this.$set(this.lessons, index, newLesson);
}
});
}
document.getElementById('course-redactor__saving-status').innerText = 'СОХРАНЕНО';
this.savingTimeout = setTimeout(() => {
document.getElementById('course-redactor__saving-status').innerText = '';
}, 2000);
showNotification("success", 'Урок сохранён');
this.goToLessons();
this.lessonSaving = false;
})
.catch((err) => {
this.lessonSaving = false;
//console.error(err);
document.getElementById('course-redactor__saving-status').innerText = 'ОШИБКА';
this.savingTimeout = setTimeout(() => {
document.getElementById('course-redactor__saving-status').innerText = '';
}, 2000);
// alert('Произошло что-то страшное: '+err.toString());
console.log(err);
if(err.response) {
for(let i in err.response.data) {
if(typeof err.response.data[i] === "array") {
showNotification("error", this.lessonFields[i]+": "+err.response.data[i].join(', '));
}
}
} else {
showNotification("error", "Ошибка "+err.toString());
}
});
},
goToLessons() {
@ -652,15 +694,32 @@
}
},
validate(silent) {
//console.log('valadte', arguments);
console.log('validate', this.$v.$invalid);
this.showErrors = true;
if (this.$v.course.$invalid) {
if(!silent) {
for(let i in this.$v.course) {
if(this.$v.course[i].$invalid) {
showNotification("error", "Ошибка валидации поля "+this.fields[i]);
}
}
}
// showNotification("error", "Заполните все необходимые поля");
return false;
}
return true;
},
validateLesson(silent) {
console.log('validate', this.$v.$invalid);
this.showErrors = true;
if (this.$v.$invalid) {
if (this.$v.currentLesson.$invalid) {
if(!silent) {
for(let i in this.$v.course) {
if(this.$v.course[i].$invalid) {
showNotification("error", "Ошибка валидации поля "+this.fields[i]);
}
}
for(let i in this.$v.currentLesson) {
if(this.$v.currentLesson[i].$invalid) {
showNotification("error", "Ошибка валидации поля "+this.lessonFields[i]);
}
}
}
// showNotification("error", "Заполните все необходимые поля");
return false;
@ -671,13 +730,18 @@
onCoursePreview() {
if(this.course.id) {
let url;
if(this.live) {
url = `/school/lessons/${this.course.id}`;
if(this.currentLesson && this.currentLesson.id) {
url = `/lesson/${this.currentLesson.id}`;
} else {
if (this.course.url) {
url = `/course/${this.course.url}`;
if(this.live) {
url = `/school/lessons/${this.course.id}`;
} else {
if (this.course.url) {
url = `/course/${this.course.url}`;
}
url = `/course/${this.course.id}`;
}
url = `/course/${this.course.id}`;
}
let newTab = window.open(url, '_blank');
@ -781,9 +845,11 @@
}, 2000);
// alert('Произошло что-то страшное: '+err.toString());
//console.log(err.response.data);
if(err.response.data) {
if(err.response) {
for(let i in err.response.data) {
showNotification("error", this.fields[i]+": "+err.response.data[i].join(', '));
if(typeof err.response.data[i] === "array") {
showNotification("error", this.fields[i] + ": " + err.response.data[i].join(', '));
}
}
} else {
showNotification("error", "Ошибка "+err.toString());
@ -883,28 +949,28 @@
});
}
let user = api.getCurrentUser(this.accessToken);
promises.push(user);
user.then((response) => {
if (response.data) {
this.me = response.data;
if(this.me.role == ROLE_ADMIN) {
api.getUsers({role: [ROLE_AUTHOR,ROLE_ADMIN], page_size: 1000}, this.accessToken)
.then((usersResponse) => {
if (usersResponse.data) {
this.users = usersResponse.data.results.map((user) => {
return {
title: `${user.first_name} ${user.last_name}`,
value: user.id
}
});
}
});
}
}
});
// let user = api.getCurrentUser(this.accessToken);
// promises.push(user);
//
// user.then((response) => {
// if (response.data) {
// this.me = response.data;
//
// if(this.me.role == ROLE_ADMIN) {
// api.getUsers({role: [ROLE_AUTHOR,ROLE_ADMIN], page_size: 1000}, this.accessToken)
// .then((usersResponse) => {
// if (usersResponse.data) {
// this.users = usersResponse.data.results.map((user) => {
// return {
// title: `${user.first_name} ${user.last_name}`,
// value: user.id
// }
// });
// }
// });
// }
// }
// });
// if (this.courseId) {
// this.loadCourse().then(()=>{this.updateViewSection(window.location, 'load')}).catch(()=>{
@ -967,23 +1033,23 @@
this.course.category = value.value;
}
},
userSelect: {
get() {
if (!this.users || this.users.length === 0 || !this.course || !this.course.author) {
return null;
}
let value;
this.users.forEach((user) => {
if (user.value === this.course.author) {
value = user;
}
});
return value;
},
set(value) {
this.course.author = value.value;
}
},
// userSelect: {
// get() {
// if (!this.users || this.users.length === 0 || !this.course || !this.course.author) {
// return null;
// }
// let value;
// this.users.forEach((user) => {
// if (user.value === this.course.author) {
// value = user;
// }
// });
// return value;
// },
// set(value) {
// this.course.author = value.value;
// }
// },
courseFullUrl() {
if (!this.course.url) {
return `https://lil.city/course/${this.course.id}`;
@ -1118,5 +1184,12 @@
background: white;
border-radius: 10px;
}
.course-redactor__preview-button-bg-save {
background-color: #58fffb;
}
.course-redactor__preview-button {
transition: backgroundColor 0.5s ease-in-out;
}
</style>

73
web/src/components/LessonRedactor.vue
Unescape View File

@ -14,52 +14,56 @@
</div>
<div class="kit__title title">{{ title }}</div>
<div class="kit__section">
<div class="kit__field field">
<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">
<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 v-for="(block, index) in lesson.content">
<block-text v-if="block.type === 'text'"
:index="index"
:title.sync="block.data.title"
:text.sync="block.data.text"
v-on:remove="onBlockRemoved"
:access-token="accessToken"/>
<block-image-text v-if="block.type === 'image-text'"
:index="index"
:title.sync="block.data.title"
:text.sync="block.data.text"
:image-id.sync="block.data.image_id"
:image-url.sync="block.data.image_url"
v-on:remove="onBlockRemoved"
:access-token="accessToken"/>
<block-image v-if="block.type === 'image'"
:index="index"
:title.sync="block.data.title"
:image-id.sync="block.data.image_id"
:image-url.sync="block.data.image_url"
v-on:remove="onBlockRemoved"
:access-token="accessToken"/>
<block-images v-if="block.type === 'images'"
<vue-draggable v-model="lesson.content" @start="drag=true" @end="drag=false" :options="{ handle: '.sortable__handle' }">
<div v-for="(block, index) in lesson.content">
<block-text v-if="block.type === 'text'"
:index="index"
:title.sync="block.data.title"
:text.sync="block.data.text"
:images.sync="block.data.images"
v-on:remove="onBlockRemoved"
:access-token="accessToken"/>
<block-video v-if="block.type === 'video'"
:index="index"
:title.sync="block.data.title"
v-on:remove="onBlockRemoved"
:video-url.sync="block.data.video_url"/>
</div>
<block-image-text v-if="block.type === 'image-text'"
:index="index"
:title.sync="block.data.title"
:text.sync="block.data.text"
:image-id.sync="block.data.image_id"
:image-url.sync="block.data.image_url"
v-on:remove="onBlockRemoved"
:access-token="accessToken"/>
<block-image v-if="block.type === 'image'"
:index="index"
:title.sync="block.data.title"
:image-id.sync="block.data.image_id"
:image-url.sync="block.data.image_url"
v-on:remove="onBlockRemoved"
:access-token="accessToken"/>
<block-images v-if="block.type === 'images'"
:index="index"
:title.sync="block.data.title"
:text.sync="block.data.text"
:images.sync="block.data.images"
v-on:remove="onBlockRemoved"
:access-token="accessToken"/>
<block-video v-if="block.type === 'video'"
:index="index"
:title.sync="block.data.title"
v-on:remove="onBlockRemoved"
:video-url.sync="block.data.video_url"/>
</div>
</vue-draggable>
<block-add v-on:added="onBlockAdded" />
<div class="kit__foot">
@ -78,10 +82,12 @@
import BlockImageText from './blocks/BlockImageText'
import BlockVideo from './blocks/BlockVideo'
import {api} from "../js/modules/api";
import Draggable from 'vuedraggable';
import _ from 'lodash'
export default {
name: "lesson-redactor",
props: ["lesson", "saving", "accessToken"],
props: ["lesson", "saving", "accessToken", "$v"],
methods: {
goBack() {
this.$emit('back');
@ -113,6 +119,7 @@
'block-image-text': BlockImageText,
'block-images': BlockImages,
'block-video': BlockVideo,
'vue-draggable': Draggable,
}
}
</script>

Write Preview
Loading…
Cancel
Save