image fit, author select

web/src/components/CourseRedactor.vue

@@ -10,9 +10,11 @@
                   <div class="info__ava ava">
                     <img :src="authorPicture" alt="Аватар" class="ava__pic">
                   </div>
-                  <div class="info__group">
+                  <div v-if="me" class="info__group info__field--light">
                     <div class="info__label">АВТОР</div>
-                    <div class="info__value">{{ authorName }}</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>
                 </div>
                 <div class="info__upload upload">
@@ -239,6 +241,7 @@
 </template>
 
 <script>
+    import { ROLE_ADMIN, ROLE_AUTHOR } from './consts'
     import LinkInput from './inputs/LinkInput'
     import DatePicker from 'vuejs-datepicker'
     import BlockText from './blocks/BlockText'
@@ -259,11 +262,15 @@
         data() {
             return {
                 viewSection: 'course',
+                me: null,
+                users: null,
+                ROLE_ADMIN: ROLE_ADMIN,
                 course: {
                     title: '',
                     category: null,
                     categorySelect: null,
                     duration: 1,
+                    author: null,
                     price: 0,
                     url: '',
                     coverImage: '',
@@ -528,6 +535,27 @@
                     this.updateCategory();
                 });
 
+            api.getCurrentUser(this.accessToken)
+                .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} (${user.email})`,
+                                                value: user.id
+                                            }
+                                        });
+                                    }
+                                });
+                        }
+                    }
+                });
+
             if (this.courseId) {
                 this.loadCourse()
             } else {
@@ -563,6 +591,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;
+                }
+            },
             courseFullUrl() {
               let suffix = this.course.url ? this.course.url : 'ваша_ссылка';
               return `https://lil.city/course/${suffix}`;

web/src/components/blocks/Image.vue

@@ -48,5 +48,7 @@
   .kit__photo-image {
     width: 140px;
     height: 110px;
+    display: block;
+    object-fit: contain;
   }
 </style>

web/src/components/consts.js

@@ -0,0 +1,3 @@
+export const ROLE_USER = 0;
+export const ROLE_AUTHOR = 1;
+export const ROLE_ADMIN = 2;

web/src/js/modules/api.js

@@ -5,6 +5,21 @@ axios.defaults.headers.post['Content-Type'] = 'application/json';
 axios.defaults.headers.post['Accept'] = 'application/json';
 
 export const api = {
+    getCurrentUser: (accessToken) => {
+        return axios.get('/api/v1/users/me/', {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    },
+    getUsers: (params, accessToken) => {
+        return axios.get('/api/v1/users/', {
+            params: params,
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    },
     getCategories: (accessToken) => {
         return axios.get('/api/v1/categories/', {
             headers: {
@@ -222,6 +237,7 @@ export const api = {
             title: courseJSON.title,
             short_description: courseJSON.short_description,
             category: courseJSON.category.id ? courseJSON.category.id : courseJSON.category,
+            author: courseJSON.author.id ? courseJSON.author.id : courseJSON.author,
             price: parseFloat(courseJSON.price),
             is_paid: parseFloat(courseJSON.price) > 0,
             is_deferred: isDeferred,