Hide the download button if the user doesn't have any download option…

…s, such as if it is a very small image and they only have reduced quality access
UNC-Libraries · Jan 24, 2024 · b5b1192 · b5b1192
1 parent 106fbb6
commit b5b1192
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 7 deletions.
diff --git a/static/js/vue-cdr-access/src/mixins/fileDownloadUtils.js b/static/js/vue-cdr-access/src/mixins/fileDownloadUtils.js
@@ -52,23 +52,28 @@ export default {
                 <div class="dropdown-menu table-downloads" id="dropdown-menu" role="menu" aria-hidden="true">
                     <div class="dropdown-content">`;
 
+                let opt_html = "";
                 if (this.validSizeOption(brief_object, 800)) {
-                    html += `<a href="${this.imgDownloadLink(brief_object.id, '800')}" class="dropdown-item">${this.$t('full_record.small') } JPG (800px)</a>`;
+                    opt_html += `<a href="${this.imgDownloadLink(brief_object.id, '800')}" class="dropdown-item">${this.$t('full_record.small') } JPG (800px)</a>`;
                 }
                 if (this.validSizeOption(brief_object, 1600)) {
-                    html += `<a href="${this.imgDownloadLink(brief_object.id, '1600')}" class="dropdown-item">${this.$t('full_record.medium') } JPG (1600px)</a>`;
+                    opt_html += `<a href="${this.imgDownloadLink(brief_object.id, '1600')}" class="dropdown-item">${this.$t('full_record.medium') } JPG (1600px)</a>`;
                 }
                 if (this.validSizeOption(brief_object, 2500)) {
-                    html += `<a href="${this.imgDownloadLink(brief_object.id, '2500')}" class="dropdown-item">${this.$t('full_record.large') } JPG (2500px)</a>`;
+                    opt_html += `<a href="${this.imgDownloadLink(brief_object.id, '2500')}" class="dropdown-item">${this.$t('full_record.large') } JPG (2500px)</a>`;
                 }
 
                 if (this.hasPermission(brief_object, 'viewOriginal')) {
-                    html += `<a href="${this.imgDownloadLink(brief_object.id, 'full')}" class="dropdown-item">${this.$t('full_record.full_size')} JPG</a>`;
-                    html += '<hr class="dropdown-divider">';
-                    html += `<a href="/indexablecontent/${brief_object.id}?dl=true" class="dropdown-item">${this.$t('full_record.original_file')}</a>`;
+                    opt_html += `<a href="${this.imgDownloadLink(brief_object.id, 'full')}" class="dropdown-item">${this.$t('full_record.full_size')} JPG</a>`;
+                    opt_html += '<hr class="dropdown-divider">';
+                    opt_html += `<a href="/indexablecontent/${brief_object.id}?dl=true" class="dropdown-item">${this.$t('full_record.original_file')}</a>`;
+                }
+                // No download options were available, so return no download button
+                if (opt_html === '') {
+                    return '';
                 }
 
-                html += '</div>';
+                html += opt_html + '</div>';
                 html += '</div>';
                 html += '</div>';
 

diff --git a/static/js/vue-cdr-access/tests/unit/restrictedContent.spec.js b/static/js/vue-cdr-access/tests/unit/restrictedContent.spec.js
@@ -256,6 +256,46 @@ describe('restrictedContent.vue', () => {
         expect(dropdown_items.length).toEqual(3);
     });
 
+    it('shows a download button with no reduced download options when viewOriginal set and image is smaller than min size', async () => {
+        const updated_data = cloneDeep(record);
+        updated_data.dataFileUrl = 'content/4db695c0-5fd5-4abf-9248-2e115d43f57d';
+        updated_data.resourceType = 'File';
+        updated_data.briefObject.datastream[1] = "original_file|image/jpeg|tinyz||69490|urn:sha1:0d48dadb5d61ae0d41b4998280a3c39577a2f94a||640x480";
+        await setRecordPermissions(updated_data, ['viewAccessCopies', 'viewReducedResImages', 'viewOriginal']);
+
+        expect(wrapper.find('.download.dropdown').exists()).toBe(true);
+        await wrapper.find('button').trigger('click'); // Open
+        const dropdown_items = wrapper.findAll('.dropdown-item');
+        expect(dropdown_items[0].text()).toEqual('Full Size JPG');
+        expect(dropdown_items[1].text()).toEqual('Original File');
+        expect(dropdown_items.length).toEqual(2);
+    });
+
+    it('hides a download button with viewReducedResImages when image is smaller than min size', async () => {
+        const updated_data = cloneDeep(record);
+        updated_data.dataFileUrl = 'content/4db695c0-5fd5-4abf-9248-2e115d43f57d';
+        updated_data.resourceType = 'File';
+        updated_data.briefObject.datastream[1] = "original_file|image/jpeg|tinyz||69490|urn:sha1:0d48dadb5d61ae0d41b4998280a3c39577a2f94a||640x480";
+        await setRecordPermissions(updated_data, ['viewAccessCopies', 'viewReducedResImages']);
+
+        expect(wrapper.find('.download.dropdown').exists()).toBe(false);
+    });
+
+    it('shows a download button with partial reduced download options with viewReducedResImages when image is smaller than largest size', async () => {
+        const updated_data = cloneDeep(record);
+        updated_data.dataFileUrl = 'content/4db695c0-5fd5-4abf-9248-2e115d43f57d';
+        updated_data.resourceType = 'File';
+        updated_data.briefObject.datastream[1] = "original_file|image/jpeg|midz||69490|urn:sha1:0d48dadb5d61ae0d41b4998280a3c39577a2f94a||1700x1200";
+        await setRecordPermissions(updated_data, ['viewAccessCopies', 'viewReducedResImages']);
+
+        expect(wrapper.find('.download.dropdown').exists()).toBe(true);
+        await wrapper.find('button').trigger('click'); // Open
+        const dropdown_items = wrapper.findAll('.dropdown-item');
+        expect(dropdown_items[0].text()).toEqual('Small JPG (800px)');
+        expect(dropdown_items[1].text()).toEqual('Medium JPG (1600px)');
+        expect(dropdown_items.length).toEqual(2);
+    });
+
     it('does not display a download button for non-works/files', async () => {
         const updated_data = cloneDeep(record);
         updated_data.dataFileUrl = 'content/4db695c0-5fd5-4abf-9248-2e115d43f57d';