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 <redacted>

diff --git a/resources/assets/js/vues/attachment-manager.js b/resources/assets/js/vues/attachment-manager.js
index 16f96c70b378df6b91e5a9e63f66fc979e4988b3..5acad6184a95305c1e1dc4471a335daa62a9c069 100644 (file)
--- 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 f6ee2510d0b4f5040b56e18eaac9ef2241d0741a..01c224543987c03f14a40abd73de7f0d62b1ad24 100644 (file)
--- 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">