lessons admin

apps/course/templatetags/jsonify_queryset.py

@@ -0,0 +1,8 @@
+from django import template
+import json
+
+register = template.Library()
+
+@register.filter
+def jsonify(object,fields):
+    return json.dumps(list(object.values(*fields.split(','))))

apps/school/templates/school/livelessons_list.html

@@ -1,4 +1,7 @@
-{% extends "templates/lilcity/index.html" %} {% load static %} {% block content %}
+{% extends "templates/lilcity/index.html" %}
+{% load jsonify from jsonify_queryset %}
+
+{% load static %} {% block content %}
 <div class="main" style="background-image: url({% static 'img/bg-1.jpg' %});">
   <div class="main__center center">
     <div class="main__title">Онлайн-курсы LilCity</div>
@@ -6,11 +9,20 @@
 </div>
 <div class="section">
   <div class="section__center center">
-    <ul>
-    {% for livelesson in livelesson_list %}
-    <li>{{ livelesson.title }} <a href="{% url 'school:lessons-edit' livelesson.id %}">Редактировать</a></li>
-    {% endfor %}
-    </ul>
+
+    <lessons-admin :lessons="{{livelesson_list | jsonify:"id,title,short_description"}}"></lessons-admin>
+
+    <!--<ul>-->
+    <!--{% for livelesson in livelesson_list %}-->
+    <!--<li>{{ livelesson.title }} <a href="{% url 'school:lessons-edit' livelesson.id %}">Редактировать</a></li>-->
+    <!--{% endfor %}-->
+    <!--</ul>-->
   </div>
 </div>
 {% endblock content %}
+
+
+{% block foot %}
+<script type="text/javascript" src="{% static 'lessonsAdmin.js' %}"></script>
+<!--<link rel="stylesheet" href="{% static 'courseRedactor.css' %}" />-->
+{% endblock foot %}

web/src/components/LessonsAdmin.vue

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <div class="kit__body">
+            <div class="lessons__list">
+                <div class="lessons__item" v-for="(lesson, index) in lessons">
+                    <div class="lessons__actions lessons__actions__no-hover">
+                        <button type="button" class="lessons__action" @click="removeLesson(lesson.id)">
+                            <svg class="icon icon-delete">
+                                <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
+                            </svg>
+                        </button>
+                        <button type="button" class="lessons__action" @click="editLesson(lesson.id)">
+                            <svg class="icon icon-edit">
+                                <use xlink:href="/static/img/sprite.svg#icon-edit"></use>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="lessons__subtitle subtitle">{{ lesson.title }}</div>
+                    <div class="lessons__row">
+                        <div class="lessons__content">{{ lesson.short_description }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="lessons__foot">
+                <button type="button" class="lessons__btn btn btn_md" @click="addLesson">СОЗДАТЬ УРОК</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    // import { ROLE_ADMIN, ROLE_AUTHOR } from './consts'
+    // import LinkInput from './inputs/LinkInput'
+    // import DatePicker from 'vuejs-datepicker'
+    // import BlockText from './blocks/BlockText'
+    // import BlockImage from './blocks/BlockImage'
+    // import BlockImages from './blocks/BlockImages'
+    // import BlockImageText from './blocks/BlockImageText'
+    // import BlockVideo from './blocks/BlockVideo'
+    // import LilSelect from "./inputs/LilSelect";
+    // import LessonRedactor from "./LessonRedactor";
+    // import {api} from "../js/modules/api";
+    // import BlockAdd from "./blocks/BlockAdd";
+    // import $ from 'jquery';
+    // import {required, minValue, numeric, url } from 'vuelidate/lib/validators'
+    // import slugify from 'slugify';
+    // import Draggable from 'vuedraggable';
+    import {showNotification} from "../js/modules/notification";
+    // import createHistory from "history/createBrowserHistory";
+    // import moment from 'moment'
+    // import _ from 'lodash'
+
+    export default {
+        name: "leessons-admin",
+        props: ["lessons"],
+        methods: {
+            addLesson() {
+                window.location = '/course/create/live';
+            },
+            editLesson(id) {
+                window.location = '/school/lessons/'+id+'/edit';
+            },
+            removeLesson(id) {
+                showNotification('error', '<p>Вжух и удалили!<sup style="vertical-align: super;">(на самом деле нет)</sup></p>');
+            }
+        }
+    }
+</script>

web/src/js/lessons-admin.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import 'babel-polyfill'
+import LessonsAdmin from '../components/LessonsAdmin.vue'
+
+if (process.env.NODE_ENV === 'development') {
+    // Enable vue-devtools
+    Vue.config.devtools = true;
+}
+
+
+let app = new Vue({
+    el: '#lilcity-vue-app',
+    components: {
+        'lessons-admin': LessonsAdmin,
+    }
+});

web/src/js/modules/notification.js

@@ -4,7 +4,7 @@ import '../../sass/components/notification.scss';
 export function showNotification(style, text) {
   let htmlNode = document.createElement('div');
 
-  let htmlElement = $(htmlNode).addClass('notification').addClass(`notification--${style}`).text(text).appendTo($('body'));
+  let htmlElement = $(htmlNode).addClass('notification').addClass(`notification--${style}`).html(text).appendTo($('body'));
 
   if($('body').find('.notification').length) {
       var outerHeight = 0;

web/src/js/modules/toggle.js

@@ -5,13 +5,13 @@ $(document).ready(function () {
         e.preventDefault();
         let _this = $(this);
         _this.toggleClass('active');
-        _this.next().slideToggle();
+        // _this.next().slideToggle();
     });
     $('.js-timing-toggle').on('click', function(e){
         e.preventDefault();
         let _this = $(this);
         let _parent = _this.closest('.timing__item')
         _parent.toggleClass('open');
-        _parent.next().slideToggle();
+        // _parent.next().slideToggle();
     });
 });

web/src/sass/_common.sass

@@ -2623,6 +2623,9 @@ a.grey-link
     opacity: 0
     visibility: hidden
     transition: opacity .2s, visibility .2s
+    &__no-hover
+      opacity: 1
+      visibility: visible
   &__action
     margin-left: 10px
     padding: 10px

web/webpack.config.js

@@ -9,6 +9,7 @@ module.exports = {
   entry: {
     app: "./src/js/app.js",
     courseRedactor: "./src/js/course-redactor.js",
+    lessonsAdmin: "./src/js/lessons-admin.js",
     mixpanel: "./src/js/third_party/mixpanel-2-latest.js",
     sprite: glob('./src/icons/*.svg'),
     images: glob('./src/img/*'),