From 7d81a9515687aaff833ab76523a1b909fc21b764 Mon Sep 17 00:00:00 2001
From: Abijeet <abijeetpatro@gmail.com>
Date: Sun, 17 Jun 2018 14:21:31 +0530
Subject: [PATCH] Fixes issue with having to click the delete icon for
 attachment twice.

Fixes #884

This is happening because -

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

Source: https://vuejs.org/v2/guide/reactivity.html

Also added padding to the icons in the attachment section.

Signed-off-by: Abijeet <abijeetpatro@gmail.com>
---
 resources/assets/js/vues/attachment-manager.js | 4 +++-
 resources/views/pages/form-toolbox.blade.php   | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/vues/attachment-manager.js b/resources/assets/js/vues/attachment-manager.js
index 16f96c70b..5acad6184 100644
--- a/resources/assets/js/vues/attachment-manager.js
+++ b/resources/assets/js/vues/attachment-manager.js
@@ -52,7 +52,9 @@ let methods = {
     },
 
     deleteFile(file) {
-        if (!file.deleting) return file.deleting = true;
+        if (!file.deleting) {
+            return this.$set(file, 'deleting', true);
+        }
 
         this.$http.delete(window.baseUrl(`/attachments/${file.id}`)).then(resp => {
             this.$events.emit('success', resp.data.message);
diff --git a/resources/views/pages/form-toolbox.blade.php b/resources/views/pages/form-toolbox.blade.php
index f6ee2510d..01c224543 100644
--- a/resources/views/pages/form-toolbox.blade.php
+++ b/resources/views/pages/form-toolbox.blade.php
@@ -42,8 +42,8 @@
                                             <span class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</span>
                                         </div>
                                     </div>
-                                    <div @click="startEdit(file)" class="drag-card-action text-center text-primary" style="padding: 0;">@icon('edit')</div>
-                                    <div @click="deleteFile(file)" class="drag-card-action text-center text-neg" style="padding: 0;">@icon('close')</div>
+                                    <div @click="startEdit(file)" class="drag-card-action text-center text-primary">@icon('edit')</div>
+                                    <div @click="deleteFile(file)" class="drag-card-action text-center text-neg">@icon('close')</div>
                                 </div>
                             </draggable>
                             <p class="small muted" v-if="files.length === 0">