slug + отправка курса на модерацию

web/src/components/CourseRedactor.vue

@@ -31,7 +31,7 @@
                               rows="1"
                               title="Название курса"
                               v-autosize="course.title"
-                              @input="$v.course.title.$touch()"
+                              @change="onCourseNameInput"
                               v-model="course.title"></textarea>
                   </div>
                 </div>
@@ -67,7 +67,7 @@
                 <div class="info__field field">
                   <div class="field__label field__label_gray">ССЫЛКА</div>
                   <div class="field__wrap">
-                    <input type="text" class="field__input" v-model="course.url">
+                    <input type="text" class="field__input" v-model="course.url" @input="slugChanged = true">
                   </div>
                   <div class="field__wrap field__wrap--additional">{{ courseFullUrl }}</div>
                 </div>
@@ -253,9 +253,9 @@
     import LessonRedactor from "./LessonRedactor";
     import {api} from "../js/modules/api";
     import BlockAdd from "./blocks/BlockAdd";
-    import debounce from 'lodash.debounce';
     import $ from 'jquery';
     import {required, minValue, numeric } from 'vuelidate/lib/validators'
+    import slugify from 'slugify';
 
     export default {
         name: "course-redactor",
@@ -266,6 +266,7 @@
                 me: null,
                 users: null,
                 ROLE_ADMIN: ROLE_ADMIN,
+                slugChanged: false,
                 course: {
                     title: '',
                     status: null,
@@ -381,7 +382,12 @@
             onCoursePriceChange(event) {
                 this.course.price = event.target.value;
             },
-
+            onCourseNameInput() {
+                this.$v.course.title.$touch();
+                if (!this.slugChanged) {
+                    this.course.url = slugify(this.course.title);
+                }
+            },
             updateCategory() {
                 if (this.categoryOptions && Array.isArray(this.categoryOptions) && this.course.category) {
                     this.categoryOptions.forEach((category) => {
@@ -511,7 +517,7 @@
                 publishButton.attr('disabled', 'disabled');
                 api.publishCourse(this.course.id, this.accessToken)
                     .then((response) => {
-                        document.getElementById('course-redactor__saving-status').innerText = 'НА МОДЕРАЦИИ';
+                        window.location = '/course/on-moderation';
                     })
                     .catch(() => {
                         publishButton.removeAttr('disabled');
@@ -528,11 +534,14 @@
                 if (this.savingDebounceTimeout) {
                     clearTimeout(this.savingDebounceTimeout);
                 }
+                this.courseSyncHook = false;
                 this.savingDebounceTimeout = setTimeout(() => {
                     this.courseSaving = true;
                     clearTimeout(this.savingTimeout);
                     document.getElementById('course-redactor__saving-status').innerText = 'СОХРАНЕНИЕ';
-                    api.saveCourse(this.course, this.accessToken)
+                    const courseObject = this.course;
+                    courseObject.url = slugify(courseObject.url);
+                    api.saveCourse(courseObject, this.accessToken)
                         .then((response) => {
                             this.courseSaving = false;
                             document.getElementById('course-redactor__saving-status').innerText = 'СОХРАНЕНО';
@@ -545,11 +554,15 @@
                                 courseData.coverImage = this.course.coverImage;
                             }
                             this.course = courseData;
+                            if (courseData.url) {
+                                this.slugChanged = true;
+                            }
                             this.$nextTick(() => {
                                 this.courseSyncHook = false;
-                            })
+                            });
                         })
                         .catch((err) => {
+                            this.courseSyncHook = false;
                             this.courseSaving = false;
                         });
                 }, 2000);
@@ -643,8 +656,11 @@
                 }
             },
             courseFullUrl() {
-              let suffix = this.course.url ? this.course.url : 'ваша_ссылка';
-              return `https://lil.city/course/${suffix}`;
+                if (!this.course.url) {
+                    return `https://lil.city/course/${this.course.id}`;
+                }
+                let suffix = this.course.url ? this.course.url : 'ваша_ссылка';
+                return `https://lil.city/course/${suffix}`;
             },
         },
         watch: {