Displays author name in Merge UI (#9920)

* added get_author_names function

* created enhanced records

* added author name and css

* Added enhancedRecord to merge function

* remove from enhanced records

* Update book path to search

* throws new error

* added comment

* used try/catch

* updated enhancedRecords to use for loop

* add author name as td

* Moved bold to css

* Small style tweaks to author names in merge table

* Fix undefined variable in AuthorRoleTable.vue

* Handle cases where authors are missing in MergeTable

openlibrary/components/MergeUI/AuthorRoleTable.vue

@@ -19,7 +19,7 @@
                                 {{role[field].key.slice("/authors/".length)}}
                             </a>
                         </div>
-                        <div v-else>{{a[k]}}</div>
+                        <div v-else>{{role[field]}}</div>
                     </div>
                 </td>
             </tr>

openlibrary/components/MergeUI/MergeTable.vue

@@ -8,7 +8,7 @@
     </thead>
     <tbody>
       <MergeRow
-        v-for="record in records"
+        v-for="record in enhancedRecords"
         :key="record.key"
         :record="record"
         :fields="fields"
@@ -47,7 +47,7 @@ import _ from 'lodash';
 import Vue from 'vue';
 import AsyncComputed from 'vue-async-computed';
 import MergeRow from './MergeRow.vue';
-import { merge, get_editions, get_lists, get_bookshelves, get_ratings } from './utils.js';
+import { merge, get_editions, get_lists, get_bookshelves, get_ratings, get_author_names } from './utils.js';
 import CONFIGS from '../configs.js';
 
 Vue.use(AsyncComputed);
@@ -113,6 +113,28 @@ export default {
             return records;
         },
 
+        /** The records, with extra helpful metadata attached for display. Should NOT be saved to Open Library */
+        async enhancedRecords(){
+            if (!this.records) return null;
+
+            let author_names;
+
+            try {
+                author_names = await get_author_names(this.records);
+            } catch (error) {
+                console.error('Error creating enhancedRecords:', error);
+            }
+
+            const enhanced_records = _.cloneDeep(this.records)
+
+            for (const record of enhanced_records) {
+                for (const entry of (record.authors || [])) {
+                    entry.name = author_names[entry.author.key.slice('/authors/'.length)];
+                }
+            }
+            return enhanced_records
+        },
+
         async editions() {
             if (!this.records) return null;
 
@@ -474,6 +496,10 @@ li.excerpt-item {
 }
 
 .field-authors {
+  td.author-author {
+    padding-right: 6px;
+  }
+
   thead, td.author-index, td.author-type {
     display: none;
   }

openlibrary/components/MergeUI/utils.js

@@ -230,6 +230,42 @@ function save_many(items, comment, action, data) {
     });
 }
 
+/**
+ * Fetches name associated with the author key
+ * @param {Object[]} works
+ * @returns {Promise<Record<string,object>} A response to the request
+ */
+export async function get_author_names(works) {
+    const authorIds = _.uniq(works).flatMap(record =>
+        (record.authors || []).map(authorEntry => authorEntry.author.key)
+    )
+
+    if (!authorIds.length) return {};
+
+    const queryParams = new URLSearchParams({
+        q: `key:(${authorIds.join(' OR ')})`,
+        mode: 'everything',
+        fields: 'key,name',
+    })
+
+    const response = await fetch(`${CONFIGS.OL_BASE_SEARCH}/search/authors.json?${queryParams}`)
+
+    if (!response.ok) {
+        throw new Error('Failed to fetch author data');
+    }
+
+    const results = await response.json()
+
+    const authorDirectory = {}
+
+    for (const doc of results.docs) {
+        authorDirectory[doc.key] = doc.name;
+    }
+
+    return authorDirectory
+}
+
+
 // /**
 //  * @param {Object} record
 //  * @param {string} comment