Add remove button to view cards in Author and Identifiers screens

Author: abelsiqueira

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>

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>

src/components/ScreenAuthors.vue

@@ -26,14 +26,15 @@
                         v-on:editPressed="() => (editingId = index)"
                         v-on:moveDown="moveAuthorDown(index)"
                         v-on:moveUp="moveAuthorUp(index)"
+                        v-on:removePressed="removeAuthor(index)"
                     />
                     <AuthorCardEditing
                         v-else
                         v-bind:index="index"
                         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] }

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)
                 }