From 887dcfaed1457e09c78f8864261e38bad316ee6a Mon Sep 17 00:00:00 2001
From: Abel Soares Siqueira <abel.s.siqueira@gmail.com>
Date: Thu, 25 Aug 2022 14:40:20 +0200
Subject: [PATCH] Add remove button to view cards in Author and Identifiers
 screens

---
 src/components/AuthorCardViewing.vue     | 10 +++++++++-
 src/components/IdentifierCardViewing.vue | 10 +++++++++-
 src/components/ScreenAuthors.vue         | 13 +++++++++----
 src/components/ScreenIdentifiers.vue     | 13 +++++++++----
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/components/AuthorCardViewing.vue b/src/components/AuthorCardViewing.vue
index 0cf1f867..064bf41e 100644
--- a/src/components/AuthorCardViewing.vue
+++ b/src/components/AuthorCardViewing.vue
@@ -38,6 +38,14 @@
                 title="Edit"
                 v-on:click="$emit('editPressed')"
             />
+            <q-btn
+                class="author-button"
+                color="negative"
+                hover-color="negative"
+                icon="delete"
+                title="Remove author"
+                v-on:click="$emit('removePressed')"
+            />
         </div>
     </q-card>
 </template>
@@ -92,7 +100,7 @@ export default defineComponent({
             authorErrors
         }
     },
-    emits: ['editPressed', 'moveDown', 'moveUp']
+    emits: ['editPressed', 'moveDown', 'moveUp', 'removePressed']
 })
 </script>
 <style scoped>
diff --git a/src/components/IdentifierCardViewing.vue b/src/components/IdentifierCardViewing.vue
index af90f2f3..4e874d7e 100644
--- a/src/components/IdentifierCardViewing.vue
+++ b/src/components/IdentifierCardViewing.vue
@@ -37,6 +37,14 @@
                 title="Edit"
                 v-on:click="$emit('editPressed')"
             />
+            <q-btn
+                class="identifier-button"
+                color="negative"
+                hover-color="negative"
+                icon="delete"
+                title="Remove Identifier"
+                v-on:click="$emit('removePressed')"
+            />
         </div>
     </q-card>
 </template>
@@ -81,7 +89,7 @@ export default defineComponent({
             identifierErrors
         }
     },
-    emits: ['editPressed', 'moveDown', 'moveUp']
+    emits: ['editPressed', 'moveDown', 'moveUp', 'removePressed']
 })
 </script>
 <style scoped>
diff --git a/src/components/ScreenAuthors.vue b/src/components/ScreenAuthors.vue
index d3acfdc0..1b643c92 100644
--- a/src/components/ScreenAuthors.vue
+++ b/src/components/ScreenAuthors.vue
@@ -26,6 +26,7 @@
                         v-on:editPressed="() => (editingId = index)"
                         v-on:moveDown="moveAuthorDown(index)"
                         v-on:moveUp="moveAuthorUp(index)"
+                        v-on:removePressed="removeAuthor(index)"
                     />
                     <AuthorCardEditing
                         v-else
@@ -33,7 +34,7 @@
                         v-bind="author"
                         v-on:update="setAuthorField"
                         v-on:closePressed="() => (editingId = -1)"
-                        v-on:removePressed="removeAuthor"
+                        v-on:removePressed="removeAuthor(editingId)"
                     />
                 </div>
             </div>
@@ -99,11 +100,15 @@ export default defineComponent({
             await nextTick()
             scrollToBottom()
         }
-        const removeAuthor = () => {
+        const removeAuthor = (index: number) => {
             const newAuthors = [...authors.value]
-            newAuthors.splice(editingId.value, 1)
+            newAuthors.splice(index, 1)
             setAuthors(newAuthors)
-            editingId.value = -1
+            if (index < editingId.value) {
+                editingId.value -= 1
+            } else if (index === editingId.value) {
+                editingId.value = -1
+            }
         }
         const setAuthorField = (field: keyof AuthorType, value: string) => {
             const newAuthor = { ...authors.value[editingId.value] }
diff --git a/src/components/ScreenIdentifiers.vue b/src/components/ScreenIdentifiers.vue
index 735d078e..22ec909d 100644
--- a/src/components/ScreenIdentifiers.vue
+++ b/src/components/ScreenIdentifiers.vue
@@ -26,6 +26,7 @@
                         v-on:editPressed="() => (editingId = index)"
                         v-on:moveDown="moveIdentifierDown(index)"
                         v-on:moveUp="moveIdentifierUp(index)"
+                        v-on:removePressed="removeIdentifier(index)"
                     />
                     <IdentifierCardEditing
                         v-else
@@ -35,7 +36,7 @@
                         v-on:updateValue="setIdentifierValueField"
                         v-on:updateDescription="setIdentifierDescriptionField"
                         v-on:closePressed="() => (editingId = -1)"
-                        v-on:removePressed="removeIdentifier"
+                        v-on:removePressed="removeIdentifier(editingId)"
                     />
                 </div>
             </div>
@@ -109,12 +110,16 @@ export default defineComponent({
             await nextTick()
             scrollToBottom()
         }
-        const removeIdentifier = () => {
+        const removeIdentifier = (index: number) => {
             if (identifiers.value !== undefined) {
                 const newIdentifiers = [...identifiers.value]
-                newIdentifiers.splice(editingId.value, 1)
+                newIdentifiers.splice(index, 1)
                 setIdentifiers(newIdentifiers)
-                editingId.value = -1
+                if (index < editingId.value) {
+                    editingId.value -= 1
+                } else if (index === editingId.value) {
+                    editingId.value = -1
+                }
                 if (Array.isArray(newIdentifiers) && newIdentifiers.length === 0) {
                     setIdentifiers(undefined)
                 }