Fix display of exhibits in the UI (#1665)

* Fix display of exhibits in the UI. * Fix issue with multiple exhibits not being semicolon separated, and add tests * Move exhibits below finding aid ino. Add a space when separating exhibit links
UNC-Libraries · Feb 6, 2024 · 3137809 · 3137809
1 parent c44f6c8
commit 3137809
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 17 deletions.
diff --git a/static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue b/static/js/vue-cdr-access/src/components/full_record/aggregateRecord.vue
@@ -28,6 +28,13 @@
                                             <span class="has-text-weight-bold">{{ $t('full_record.finding_aid') }}: </span>
                                             <a class="finding-aid" :href="recordData.findingAidUrl">{{ recordData.findingAidUrl }}</a>
                                         </li>
+                                        <li class="exhibits" v-if="fieldExists(recordData.exhibits)">
+                                            <span class="has-text-weight-bold">{{ $t('full_record.related_digital_exhibits') }}: </span>
+                                            <template v-for="(exhibit_link, title, index) in recordData.exhibits">
+                                                <a :href="exhibit_link">{{ title }}</a>
+                                                <template v-if="hasMoreExhibits(index, recordData.exhibits)">; </template>
+                                            </template>
+                                        </li>
                                         <li v-if="fieldExists(recordData.briefObject.creator)">
                                             <span class="has-text-weight-bold">{{ $t('full_record.creator') }}: </span>
                                             {{ recordData.briefObject.creator.join('; ') }}
@@ -55,12 +62,6 @@
                                             {{ recordData.embargoDate }}
                                         </li>
                                         <abstract v-if="recordData.briefObject.abstractText" :brief-object="recordData.briefObject"/>
-                                        <li v-if="fieldExists(recordData.exhibits)">
-                                            <span class="has-text-weight-bold">{{ $t('full_record.related_digital_exhibits') }}: </span>
-                                            <template v-for="(exhibit, index) in recordData.exhibits">
-                                                <a :href="exhibit.value">{{ exhibit.key }}</a><template v-if="index < recordData.exhibits.length - 1">;</template>
-                                            </template>
-                                        </li>
                                     </ul>
                                 </div>
                             </div>

diff --git a/static/js/vue-cdr-access/src/components/full_record/collectionFolder.vue b/static/js/vue-cdr-access/src/components/full_record/collectionFolder.vue
@@ -19,13 +19,14 @@
                     <strong>{{ $t('full_record.finding_aid') }}: </strong>
                     <a :href="recordData.findingAidUrl">{{ recordData.findingAidUrl }}</a>
                 </p>
-                <abstract v-if="recordData.briefObject.abstractText" :brief-object="recordData.briefObject"/>
-                <p v-if="fieldExists(recordData.exhibits)">
+                <p class="exhibits" v-if="fieldExists(recordData.exhibits)">
                     <strong>{{ $t('full_record.related_digital_exhibits') }}: </strong>
-                    <template v-for="(exhibit, index) in recordData.exhibits">
-                        <a :href="exhibit.value">{{ exhibit.key }}</a><template v-if="index < recordData.exhibits.length - 1">;</template>
+                    <template v-for="(exhibit_link, title, index) in recordData.exhibits">
+                        <a :href="exhibit_link">{{ title }}</a>
+                        <template v-if="hasMoreExhibits(index, recordData.exhibits)">; </template>
                     </template>
                 </p>
+                <abstract v-if="recordData.briefObject.abstractText" :brief-object="recordData.briefObject"/>
                 <p><a @click.prevent="displayMetadata()" href="#">{{ $t('full_record.additional_metadata') }}</a></p>
             </div>
             <restricted-content :record-data="recordData"></restricted-content>

diff --git a/static/js/vue-cdr-access/src/components/full_record/fileRecord.vue b/static/js/vue-cdr-access/src/components/full_record/fileRecord.vue
@@ -28,6 +28,13 @@
                                                 <span class="has-text-weight-bold">{{ $t('full_record.finding_aid') }}: </span>
                                                 <a class="finding-aid" :href="recordData.findingAidUrl">{{ recordData.findingAidUrl }}</a>
                                             </li>
+                                            <li class="exhibits" v-if="fieldExists(recordData.exhibits)">
+                                                <span class="has-text-weight-bold">{{ $t('full_record.related_digital_exhibits') }}: </span>
+                                                <template v-for="(exhibit_link, title, index) in recordData.exhibits">
+                                                    <a :href="exhibit_link">{{ title }}</a>
+                                                    <template v-if="hasMoreExhibits(index, recordData.exhibits)">; </template>
+                                                </template>
+                                            </li>
                                             <li v-if="fieldExists(recordData.briefObject.creator)">
                                                 <span class="has-text-weight-bold">{{ $t('full_record.creator') }}: </span>
                                                 {{ recordData.briefObject.creator.join('; ') }}
@@ -51,12 +58,6 @@
                                                 {{ recordData.embargoDate }}
                                             </li>
                                             <abstract v-if="recordData.briefObject.abstractText" :brief-object="recordData.briefObject"/>
-                                            <li v-if="fieldExists(recordData.exhibits)">
-                                                <span class="has-text-weight-bold">{{ $t('full_record.related_digital_exhibits') }}: </span>
-                                                <template v-for="(exhibit, index) in recordData.exhibits">
-                                                    <a :href="exhibit.value">{{ exhibit.key }}</a><template v-if="index < recordData.exhibits.length - 1">;</template>
-                                                </template>
-                                            </li>
                                             <li>
                                                 <router-link id="parent-url" :to="parentWorkUrl">{{ $t('full_record.view_parent_work') }}</router-link>
                                             </li>

diff --git a/static/js/vue-cdr-access/src/mixins/fullRecordUtils.js b/static/js/vue-cdr-access/src/mixins/fullRecordUtils.js
@@ -93,6 +93,10 @@ export default {
 
         editDescriptionUrl(id) {
             return `https://${window.location.host}/admin/describe/${id}`;
+        },
+
+        hasMoreExhibits(current_exhibit, exhibits) {
+            return current_exhibit < Object.keys(exhibits).length - 1;
         }
     }
 }
diff --git a/static/js/vue-cdr-access/tests/unit/aggregateRecord.spec.js b/static/js/vue-cdr-access/tests/unit/aggregateRecord.spec.js
@@ -534,7 +534,11 @@ const record = {
     viewerPid: "8a2f05e5-d2b7-4857-ae71-c24aa28484c1",
     dataFileUrl: "content/8a2f05e5-d2b7-4857-ae71-c24aa28484c1",
     markedForDeletion: false,
-    resourceType: "Work"
+    resourceType: "Work",
+    exhibits:  {
+        "The Cartoons of Boxy": "https://exhibits.lib.unc.edu/exhibits/show/boxycartoons/intro",
+        "The Cartoons of Dwane Powell": "https://exhibits.lib.unc.edu/exhibits/show/dwanepowellcartoons/intro"
+    }
 }
 
 let wrapper, router;
@@ -613,6 +617,26 @@ describe('aggregateRecord.vue', () => {
         expect(wrapper.find('.embargo').text()).toEqual(expect.stringMatching(/Embargoed Until:\s+2199-01-01/))
     });
 
+    it("displays a list of exhibits separated by semicolons", () => {
+        let exhibits = wrapper.find('.exhibits');
+        expect(exhibits.exists()).toBe(true);
+        expect(exhibits.html()).toEqual(expect.stringMatching(/<a.href=.*boxycartoons.*>The.Cartoons.of.Boxy<\/a>;\s<a.href=.*dwanepowellcartoons.*>The Cartoons.of.Dwane.Powell<\/a>/));
+    });
+
+    it("displays a list with one exhibit without semicolons", async () => {
+        let updated_record = cloneDeep(record);
+        updated_record.exhibits = {
+            "The Epigraphs of Boxy": "https://exhibits.lib.unc.edu/exhibits/show/boxyepi/intro"
+        };
+        await wrapper.setProps({
+            recordData: updated_record
+        });
+        let exhibits = wrapper.find('.exhibits');
+        expect(exhibits.exists()).toBe(true);
+        // Regex looks to see that there's no semicolon after the last </a>
+        expect(exhibits.html()).toEqual(expect.stringMatching(/<a.href=.*boxyepi.*>The.Epigraphs.of.Boxy<\/a>(?!;)/));
+    });
+
     it("displays a list of neighbor works", () => {
         expect(wrapper.findComponent({ name: 'neighborList' }).exists()).toBe(true);
     });