From 8d1c274975ec842dd8ddc9f1bc64bcfcc1a350df Mon Sep 17 00:00:00 2001
From: Vitaly Baev <dj@vitalybaev.ru>
Date: Wed, 14 Feb 2018 18:23:38 +0300
Subject: [PATCH] =?UTF-8?q?LIL-348=20-=20=D0=9F=D0=BE=D0=BB=D1=83=D1=87?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=87=D0=B5=D1=80=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B0=20=D0=BA=D1=83=D1=80=D1=81=D0=B0,=20LIL-243?=
 =?UTF-8?q?=20-=20=D0=90=D0=B2=D1=82=D0=BE=D0=BC=D0=B0=D1=82=D0=B8=D1=87?=
 =?UTF-8?q?=D0=B5=D1=81=D0=BA=D0=BE=D0=B5=20=D1=81=D0=BE=D1=85=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=BA=D1=83=D1=80=D1=81=D0=B0,=20LI?=
 =?UTF-8?q?L-242=20=D0=A3=D0=B2=D0=B5=D0=B4=D0=BE=D0=BC=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=BE=20=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B8=20=D0=BA=D1=83=D1=80=D1=81=D0=B0,=20LI?=
 =?UTF-8?q?l-239?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/templates/lilcity/edit_index.html |   4 +-
 web/package-lock.json                     |   5 +
 web/package.json                          |   1 +
 web/src/components/CourseRedactor.vue     | 111 ++++++++++++++++++----
 web/src/js/course-redactor.js             |  10 ++
 web/src/js/modules/api.js                 |   7 ++
 6 files changed, 119 insertions(+), 19 deletions(-)

diff --git a/project/templates/lilcity/edit_index.html b/project/templates/lilcity/edit_index.html
index 8dae9b9a..b9dc4fea 100644
--- a/project/templates/lilcity/edit_index.html
+++ b/project/templates/lilcity/edit_index.html
@@ -46,13 +46,13 @@
         </button>
         <a class="header__logo logo" href="/"></a>
         <div class="header__actions">
-          <div class="header__status">СОХРАНЕНО</div>
+          <div id="course-redactor__saving-status" class="header__status"></div>
           <button class="header__btn btn btn_icon">
             <svg class="icon icon-eye">
               <use xlink:href="{% static 'img/sprite.svg' %}#icon-eye"></use>
             </svg>
           </button>
-          <button class="header__btn btn">ОПУБЛИКОВАТЬ</button>
+          <button id="course-redactor__publish-button" class="header__btn btn">ОПУБЛИКОВАТЬ</button>
         </div>
         {% if request.user.is_authenticated %}
         <div class="header__login">
diff --git a/web/package-lock.json b/web/package-lock.json
index 98596c94..17fe64e6 100755
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -7041,6 +7041,11 @@
         "lodash._bindcallback": "3.0.1"
       }
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
diff --git a/web/package.json b/web/package.json
index b926a65a..ad25f0bd 100755
--- a/web/package.json
+++ b/web/package.json
@@ -58,6 +58,7 @@
     "history": "^4.7.2",
     "ilyabirman-likely": "^2.3.0",
     "jquery": "^3.3.1",
+    "lodash.debounce": "^4.0.8",
     "moment": "^2.20.1",
     "owl.carousel": "^2.2.0",
     "slugify": "^1.2.9",
diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue
index a29ca73e..981e1c18 100644
--- a/web/src/components/CourseRedactor.vue
+++ b/web/src/components/CourseRedactor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="lilcity__course-redactor" v-on:course_publish="onCoursePublish">
     <div v-if="!courseLoading">
       <form v-if="viewSection !== 'lessons-edit'" @submit.prevent="onSubmit">
         <div class="info">
@@ -21,12 +21,15 @@
                 </div>
               </div>
               <div class="info__title">
-                <div class="info__field field field_info">
+                <div class="info__field field field_info"
+                     v-bind:class="{ error: ($v.course.title.$dirty || showErrors) && $v.course.title.$invalid }">
                   <div class="field__label">НАЗВАНИЕ КУРСА</div>
                   <div class="field__wrap">
                     <textarea class="field__textarea field__textarea_lg"
+                              rows="1"
                               title="Название курса"
                               v-autosize="course.title"
+                              @input="$v.course.title.$touch()"
                               v-model="course.title"></textarea>
                   </div>
                 </div>
@@ -39,16 +42,18 @@
                                 placeholder="Выберите категорию"/>
                   </div>
                 </div>
-                <div class="info__field field field_info">
+                <div class="info__field field field_info"
+                     v-bind:class="{ error: ($v.course.duration.$dirty || showErrors) && $v.course.duration.$invalid }">
                   <div class="field__label field__label_gray">ПРОДОЛЖИТЕЛЬНОСТЬ</div>
                   <div class="field__wrap">
-                    <input type="text" class="field__input" v-model.number="course.duration">
+                    <input type="text" class="field__input" v-model.number="course.duration"
+                           @input="$v.course.duration.$touch()">
                   </div>
                 </div>
                 <div class="info__field field field_info">
                   <div class="field__label field__label_gray">СТОИМОСТЬ</div>
                   <div class="field__wrap">
-                    <input type="text" class="field__input" v-model="displayPrice" :disabled="!course.is_paid">
+                    <input type="text" class="field__input" v-model.number="displayPrice" :disabled="!course.is_paid">
                   </div>
                 </div>
               </div>
@@ -116,12 +121,14 @@
           <div class="section__center center">
             <div class="kit">
               <div class="kit__section">
-                <div class="kit__field field">
+                <div class="kit__field field"
+                     v-bind:class="{ error: ($v.course.short_description.$dirty || showErrors) && $v.course.short_description.$invalid }">
                   <div class="field__wrap">
-                    <textarea type="text"
-                              class="field__input"
+                    <textarea class="field__input"
+                              rows="1"
                               placeholder="Кратко о курсе"
                               v-autosize="course.short_description"
+                              @input="$v.course.short_description.$touch()"
                               v-model="course.short_description"></textarea>
                   </div>
                 </div>
@@ -139,6 +146,9 @@
                         :disabled="!course.id">
                   Уроки
                 </button>
+                <div v-if="!course.id" class="kit__nav-message">
+                  Сохраните изменения в курсе, чтобы редактировать уроки
+                </div>
               </div>
               <div v-if="viewSection === 'course'" class="kit__body">
                 <div v-for="(block, index) in course.content">
@@ -243,6 +253,8 @@
     import LessonRedactor from "./LessonRedactor";
     import {api} from "../js/modules/api";
     import BlockAdd from "./blocks/BlockAdd";
+    import debounce from 'lodash.debounce';
+    import {required, minValue, numeric } from 'vuelidate/lib/validators'
 
     export default {
         name: "course-redactor",
@@ -315,9 +327,31 @@
                         'value': '18:00',
                     }
                 ],
+                showErrors: false,
+                savingTimeout: null,
                 categoryOptions: []
             }
         },
+        validations: {
+            course: {
+                title: {
+                    required
+                },
+                short_description: {
+                    required
+                },
+                duration: {
+                    required,
+                    numeric,
+                    minValue: minValue(1)
+                },
+                category: {
+                    required,
+                    numeric,
+                    minValue: minValue(1)
+                }
+            },
+        },
         methods: {
             onCoverImageSelected(event) {
                 let file = event.target.files[0];
@@ -425,29 +459,62 @@
             goToLessons() {
                 this.viewSection = 'lessons';
             },
-            loadCourse(courseId) {
+            loadCourseDraft() {
                 this.courseLoading = true;
-                api.loadCourse(courseId, this.accessToken)
+                api.getCourseDraft(this.accessToken)
                     .then((response) => {
                         this.courseLoading = false;
                         this.course = api.convertCourseJson(response.data);
+                        this.lessons = response.data.lessons.map((lessonJson) => {
+                            return api.convertLessonJson(lessonJson);
+                        });
                     })
                     .catch((err) => {
                         this.courseLoading = false;
                         console.log('error course loading', err);
                     });
             },
-            loadLessons(courseId) {
-                api.getCourseLessons(courseId, this.accessToken)
+            loadCourse() {
+                this.courseLoading = true;
+                api.loadCourse(this.courseId, this.accessToken)
                     .then((response) => {
-                        this.lessons = response.data.results.map((lessonJson) => {
+                        this.courseLoading = false;
+                        this.course = api.convertCourseJson(response.data);
+                        this.lessons = response.data.lessons.map((lessonJson) => {
                             return api.convertLessonJson(lessonJson);
                         });
                     })
                     .catch((err) => {
+                        this.courseLoading = false;
                         console.log('error course loading', err);
                     });
-            }
+            },
+            loadLessons(courseId) {
+
+            },
+            onCoursePublish() {
+                console.log('publish course');
+            },
+            saveCourseDraft: debounce(function (newValue, oldValue) {
+                if (!oldValue.id) {
+                    return;
+                }
+                this.courseSaving = true;
+                clearTimeout(this.savingTimeout);
+                document.getElementById('course-redactor__saving-status').innerText = 'СОХРАНЕНИЕ';
+                api.saveCourse(this.course, this.accessToken)
+                    .then((response) => {
+                        this.courseSaving = false;
+                        document.getElementById('course-redactor__saving-status').innerText = 'СОХРАНЕНО';
+                        this.savingTimeout = setTimeout(() => {
+                            document.getElementById('course-redactor__saving-status').innerText = '';
+                        }, 2000);
+                        // this.course = api.convertCourseJson(response.data);
+                    })
+                    .catch((err) => {
+                        this.courseSaving = false;
+                    });
+            }, 2000)
         },
         mounted() {
             api.getCategories(this.accessToken)
@@ -464,8 +531,9 @@
                 });
 
             if (this.courseId) {
-                this.loadCourse(this.courseId);
-                this.loadLessons(this.courseId);
+                this.loadCourse()
+            } else {
+                this.loadCourseDraft();
             }
         },
         computed: {
@@ -500,7 +568,16 @@
             courseFullUrl() {
               let suffix = this.course.url ? this.course.url : 'ваша_ссылка';
               return `https://lil.city/course/${suffix}`;
-            }
+            },
+        },
+        watch: {
+            'course': {
+                handler: function (newValue, oldValue) {
+                    this.saveCourseDraft(newValue, oldValue);
+                },
+                deep: true,
+            },
+
         },
         components: {
             BlockAdd,
diff --git a/web/src/js/course-redactor.js b/web/src/js/course-redactor.js
index 341d7be1..a2f32238 100644
--- a/web/src/js/course-redactor.js
+++ b/web/src/js/course-redactor.js
@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import VueAutosize from 'vue-autosize'
+import Vuelidate from 'vuelidate'
 import 'babel-polyfill'
 import CourseRedactor from '../components/CourseRedactor.vue'
+import $ from 'jquery';
 
 if (process.env.NODE_ENV === 'development') {
     // Enable vue-devtools
@@ -9,10 +11,18 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 Vue.use(VueAutosize);
+Vue.use(Vuelidate);
 
 let app = new Vue({
     el: '#lilcity-vue-app',
     components: {
         'course-redactor': CourseRedactor,
     }
+});
+
+$(document).ready(function () {
+    $('#course-redactor__publish-button').on('click', function () {
+        let event = new Event('course_publish');
+        document.getElementById('lilcity__course-redactor').dispatchEvent(event);
+    });
 });
\ No newline at end of file
diff --git a/web/src/js/modules/api.js b/web/src/js/modules/api.js
index 7dce3bef..cded5e99 100644
--- a/web/src/js/modules/api.js
+++ b/web/src/js/modules/api.js
@@ -372,4 +372,11 @@ export const api = {
             }
         });
     },
+    getCourseDraft: (accessToken) => {
+        return axios.get('/api/v1/courses/draft/', {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    }
 };
\ No newline at end of file