From b0e7491ff4ea34dd1ce905e71f1c97c8a07f251a Mon Sep 17 00:00:00 2001
From: Sanasol <mail@sanasol.ws>
Date: Wed, 14 Feb 2018 21:05:43 +0700
Subject: [PATCH] select fix, image remove

---
 web/src/components/blocks/BlockImages.vue | 15 ++++++++++++++-
 web/src/components/inputs/LilSelect.vue   |  4 ++--
 web/src/js/modules/api.js                 |  7 +++++++
 web/src/sass/_common.sass                 |  2 +-
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/web/src/components/blocks/BlockImages.vue b/web/src/components/blocks/BlockImages.vue
index e601f9ed..0d8b6017 100644
--- a/web/src/components/blocks/BlockImages.vue
+++ b/web/src/components/blocks/BlockImages.vue
@@ -25,8 +25,13 @@
       </div>
     </div>
     <div class="kit__gallery">
-      <div class="kit__preview" v-for="image in images" v-bind:class="{ 'kit__preview--loading': image.loading }">
+      <div class="kit__preview" v-for="(image, index) in images" v-bind:class="{ 'kit__preview--loading': image.loading }">
         <img :src="image.src" class="kit__pic">
+        <button type="button" @click="onRemoveImage(index)">
+          <svg class="icon icon-delete">
+            <use xlink:href="/static/img/sprite.svg#icon-delete"></use>
+          </svg>
+        </button>
       </div>
       <div class="kit__photo">
         <svg class="icon icon-add-plus">
@@ -85,6 +90,14 @@
             },
             onRemove() {
                 this.$emit('remove', this.index);
+            },
+            onRemoveImage(index) {
+                let images = this.images;
+                let id = images[index].img;
+                images.splice(index, 1);
+                this.$emit('update:images', images);
+
+                api.removeImage(id, this.accessToken);
             }
         }
     }
diff --git a/web/src/components/inputs/LilSelect.vue b/web/src/components/inputs/LilSelect.vue
index c8db3253..6845fece 100644
--- a/web/src/components/inputs/LilSelect.vue
+++ b/web/src/components/inputs/LilSelect.vue
@@ -4,8 +4,8 @@
       {{ selectedTitle }}
     </div>
     <div class="select__drop">
-      <div class="select__option" v-for="option in options">
-        <div class="select__title" @click.stop.prevent="selectOption(option)">{{ option.title }}</div>
+      <div class="select__option" v-for="option in options" @click.stop.prevent="selectOption(option)">
+        <div class="select__title">{{ option.title }}</div>
       </div>
     </div>
   </div>
diff --git a/web/src/js/modules/api.js b/web/src/js/modules/api.js
index 2a2c256a..7dce3bef 100644
--- a/web/src/js/modules/api.js
+++ b/web/src/js/modules/api.js
@@ -21,6 +21,13 @@ export const api = {
             }
         });
     },
+    removeImage: (imageId, accessToken) => {
+        return axios.delete(`/api/v1/image-objects/${imageId}/`, {
+            headers: {
+                'Authorization': `Token ${accessToken}`,
+            }
+        });
+    },
     loadCourse: (courseId, accessToken) => {
         return axios.get(`/api/v1/courses/${courseId}/`, {
             headers: {
diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass
index 463408e9..a470c883 100755
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@@ -1872,7 +1872,7 @@ a.grey-link
 .info__field--light
   .select
     .select__head
-      color: #777
+      color: #fff
       font-size: 15px
       &:after
         border-color: #fff transparent transparent transparent