Merge pull request #879 from pulibrary/issue-664

Displays filecount in Filemanager
pulibrary · Mar 8, 2018 · ec40548 · ec40548
2 parents 4acee17 + 7d475fa
commit ec40548
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 1 deletion.
diff --git a/valhalla/app/javascript/components/ResourceForm.vue b/valhalla/app/javascript/components/ResourceForm.vue
@@ -2,6 +2,7 @@
   <div>
     <h2>Set Properties <small>for this <span v-if="isMultiVolume">multi-volume</span> resource</small></h2>
     <div class="row">
+      <p class="file_count">Total files: {{fileCount}}</p>
       <!-- Viewing Direction-->
       <div class="form-group col-md-6">
         <fieldset>
@@ -53,6 +54,9 @@ export default {
     }
   },
   computed: {
+    fileCount: function () {
+      return this.$store.state.images.length
+    },
     isMultiVolume: function () {
       return this.$store.state.isMultiVolume
     },
@@ -98,4 +102,9 @@ legend {
   padding-left: 30px;
 }
 
+.file_count {
+  font-style: italic;
+  color: #777777;
+}
+
 </style>
diff --git a/valhalla/app/javascript/components/SidePanel.vue b/valhalla/app/javascript/components/SidePanel.vue
@@ -31,3 +31,8 @@ export default {
   }
 }
 </script>
+<style>
+.sidePanel h2 {
+  margin-left: -15px;
+}
+</style>
diff --git a/valhalla/app/javascript/test/unit/specs/ResourceForm.spec.js b/valhalla/app/javascript/test/unit/specs/ResourceForm.spec.js
@@ -1,6 +1,7 @@
 import Vuex from 'vuex'
 import { mount, createLocalVue } from 'vue-test-utils'
 import ResourceForm from '@/components/ResourceForm'
+import Fixtures from '@/test/fixtures/image-collection'
 const localVue = createLocalVue()
 localVue.use(Vuex)
 
@@ -18,7 +19,8 @@ describe('ResourceForm.vue', () => {
     }
     state = {
       viewingDirection: 'bottom-to-top',
-      viewingHint: 'continuous'
+      viewingHint: 'continuous',
+      images: Fixtures.imageCollection
     }
     store = new Vuex.Store({
       state,
@@ -53,6 +55,13 @@ describe('ResourceForm.vue', () => {
     expect(actions.updateViewHint).toHaveBeenCalled()
   })
 
+  it('displays the correct image (aka, fileset) count', () => {
+    const wrapper = mount(ResourceForm, { options, store, localVue })
+    const expanded = wrapper.find('.file_count')
+    const fileCount = expanded.html()
+    expect(fileCount).toEqual('<p class="file_count">Total files: 2</p>')
+  })
+
   it('has the expected html structure', () => {
     const wrapper = mount(ResourceForm, { options, store, localVue })
     expect(wrapper.element).toMatchSnapshot()

diff --git a/valhalla/app/javascript/test/unit/specs/__snapshots__/ResourceForm.spec.js.snap b/valhalla/app/javascript/test/unit/specs/__snapshots__/ResourceForm.spec.js.snap
@@ -14,6 +14,12 @@ exports[`ResourceForm.vue has the expected html structure 1`] = `
   <div
     class="row"
   >
+    <p
+      class="file_count"
+    >
+      Total files: 2
+    </p>
+     
     <div
       class="form-group col-md-6"
     >