diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue index b56c186c..a947359f 100644 --- a/web/src/components/CourseRedactor.vue +++ b/web/src/components/CourseRedactor.vue @@ -12,9 +12,7 @@
АВТОР
-
{{ authorName }}
-
+
{{ authorName }}
@@ -246,8 +244,8 @@
- +
@@ -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; + } diff --git a/web/src/components/LessonRedactor.vue b/web/src/components/LessonRedactor.vue index cbc433d4..82faaadb 100644 --- a/web/src/components/LessonRedactor.vue +++ b/web/src/components/LessonRedactor.vue @@ -14,52 +14,56 @@
{{ title }}
-
+
-
+
-
- - - - +
+ - -
+ + + + +
+
@@ -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, } }