[MINOR]: #279 contact page BE integration (#280)

* #279: Update form UI and added contact link to metamine page

* #279: Remove console.log statement

* #279: Integrated BE with contact page and updated unit test

updates

app/src/assets/css/modules/_form.scss

@@ -18,7 +18,7 @@
         font-size: 1.5rem;
         font-family: inherit;
         color: $primary;
-        padding: 1.5rem .2rem;
+        padding: 1.5rem 1rem;
         border-radius: 2px;
         background-color: rgba($primary-white, .5);
         border: none;
@@ -113,9 +113,9 @@
     }
 
     &__radio-button {
-        height: 2.5rem;
-        width: 2.5rem;
-        border: 5px solid $primary;
+        height: 2rem;
+        width: 2rem;
+        border: 3px solid $primary;
         border-radius: 50%;
         display: inline-block;
         position: absolute;
@@ -125,8 +125,8 @@
         &::after {
             content: "";
             display: block;
-            height: 1rem;
-            width: 1rem;
+            height: 0.8rem;
+            width: 0.8rem;
             border-radius: 50%;
             position: absolute;
             top: 47.38%;

app/src/components/nanomine/ImageUpload.vue

@@ -238,7 +238,7 @@ export default {
           if (this.displayableFileType(0) === false) { this.filesEditable = false } // set displayable status for image
           this.pushPhase(0)
           this.pushImageDimensions()
-          console.log(this.displayedFiles[0].size.width, this.displayedFiles[0].pixelSize.width)
+          // console.log(this.displayedFiles[0].size.width, this.displayedFiles[0].pixelSize.width)
         }
       })
     },
@@ -321,7 +321,7 @@ export default {
         } else if (this.inputtedDimensions.units === 'millimeters') {
           ratio = ratio / 1000
         }
-        console.log(this.displayedFiles[0].size.width, this.displayedFiles[0].pixelSize.width)
+        // console.log(this.displayedFiles[0].size.width, this.displayedFiles[0].pixelSize.width)
         this.selectedOptions.dimensions = { units: this.inputtedDimensions.units, width: this.displayedFiles[0].size.width, height: this.displayedFiles[0].size.height, ratio: ratio }
       } else {
         this.selectedOptions.dimensions = { units: this.inputtedDimensions.units, width: parseInt(this.inputtedDimensions.width), height: parseInt(this.inputtedDimensions.height), ratio: null }

app/src/modules/gql/contact-gql.js

@@ -1,13 +1,15 @@
 import gql from 'graphql-tag'
 
 export const CONTACT_US_QUERY = gql`
-  query submitContact($input: createContactInput!) {
+  mutation Mutation($input: createContactInput!) {
+  submitContact(input: $input) {
     _id
-    fullname
+    fullName
     email
     purpose
     message
     createdAt
     updatedAt
   }
+}
 `

app/src/pages/explorer/Gallery.vue

@@ -119,7 +119,8 @@ export default {
   methods: {
     ...mapActions('explorer/gallery', ['loadItems']),
     deleteChart (chart) {
-      console.log('delete chart', chart)
+      return;
+      // console.log('delete chart', chart)
     },
     async loadItems (page = 1) {
       this.loading = true

app/src/pages/metamine/Base.vue

@@ -42,7 +42,7 @@
                         </li>
                         <li>
                           <div class="nav_menu--container">
-                            <a class="u--default-size nav_menu--handler" href="#">CONTACT US</a>
+                            <a class="u--default-size nav_menu--handler" href="/nm/contact">CONTACT US</a>
                           </div>
                         </li>
                         <li>

app/src/pages/nanomine/contactus/contactus.html

@@ -4,6 +4,13 @@
       <div class="team_header">
         <h1 title="Research" class="visualize_header-h1 teams_header">Get in Touch</h1>
       </div>
+      <dialog-box :minWidth='40' :active="dialogBoxActive">
+        <template v-slot:title>{{ dialogTitle }}</template>
+        <template v-slot:content>{{ dialogContent }}</template>
+        <template v-slot:actions>
+          <md-button @click.native.prevent="closeDialogBox">Close</md-button>
+        </template>
+      </dialog-box>
       <p class="mb-3">
         We'd love to help. Please fill out this quick form and we will be in touch.
       </p>
@@ -14,7 +21,7 @@ <h3>Please correct the following error(s):</h3>
             <li v-for="error in errors">{{ error }}</li>
           </ul>
         </div>
-        <form class="form" v-on:submit.prevent="onSubmit">
+        <form class="form" v-on:submit.prevent="onSubmit" ref="contactForm">
           <div class="form__group">
             <input
               type="text"
@@ -82,7 +89,7 @@ <h3>Please correct the following error(s):</h3>
                   class="form__radio-input"
                   v-model="contactType"
                   id="question"
-                  value="question"
+                  value="QUESTION"
                   required
                 />
                 <label for="question" class="form__radio-label">
@@ -98,7 +105,7 @@ <h3>Please correct the following error(s):</h3>
                   class="form__radio-input"
                   v-model="contactType"
                   id="report"
-                  value="report"
+                  value="TICKET"
                 />
                 <label for="report" class="form__radio-label">
                   <span class="form__radio-button"></span>
@@ -113,7 +120,7 @@ <h3>Please correct the following error(s):</h3>
                   class="form__radio-input"
                   v-model="contactType"
                   id="suggestion"
-                  value="suggestion"
+                  value="SUGGESTION"
                 />
                 <label for="suggestion" class="form__radio-label">
                   <span class="form__radio-button"></span>
@@ -128,7 +135,7 @@ <h3>Please correct the following error(s):</h3>
                   class="form__radio-input"
                   v-model="contactType"
                   id="comment"
-                  value="comment"
+                  value="COMMENT"
                 />
                 <label for="comment" class="form__radio-label">
                   <span class="form__radio-button"></span>

app/src/pages/nanomine/contactus/contactus.js

@@ -1,9 +1,17 @@
 import { CONTACT_US_QUERY } from '@/modules/gql/contact-gql'
+import dialogBox from '@/components/Dialog.vue'
+import { mapMutations, mapGetters } from 'vuex'
 
 export default {
   name: 'Contact',
+  components: {
+    dialogBox
+  },
   data () {
     return {
+      dialogTitle: '',
+      dialogContent: '',
+      dialogType: '',
       name: null,
       email: null,
       contactType: null,
@@ -12,6 +20,11 @@ export default {
       errors: []
     }
   },
+  computed: {
+    ...mapGetters({
+      dialogBoxActive: 'dialogBox'
+    })
+  },
   methods: {
     validateForm: function () {
       this.errors = []
@@ -46,44 +59,64 @@ export default {
     },
 
     resetForm: function () {
-      this.name = null
-      this.email = null
-      this.message = null
-      this.contactType = null
+      this.$refs.contactForm.reset()
       this.errors = []
     },
-
+    openDialogBox (element) {
+      this.dialogType = element.type
+      this.dialogTitle = element.header
+      this.dialogContent = element.content
+      this.toggleDialogBox()
+    },
+    closeDialogBox () {
+      this.toggleDialogBox()
+    },
     onSubmit: async function () {
       this.validateForm()
       if (this.errors.length) {
         return
       }
-      this.$apollo.queries.form()
-      this.resetForm()
+      try {
+        await this.$apollo.mutate({
+          mutation: CONTACT_US_QUERY,
+          variables: {
+            input: {
+              fullName: this.name,
+              email: this.email,
+              purpose: this.contactType,
+              message: this.message
+            }
+          }
+        })
+        this.openDialogBox({
+          type: 'Success',
+          header: 'Submitted successfully',
+          content: 'We would get back to you shortly'
+        })
+        this.resetForm()
+      } catch (error) {
+        return this.openDialogBox({
+          type: 'Error',
+          header: 'Submit Error',
+          content: 'Something went wrong!' // Todo: (@tolu) Show specific error message here & try again button!
+        })
+      }
+    },
+    ...mapMutations({
+      toggleDialogBox: 'setDialogBox'
+    })
+  },
+  watch: {
+    dialogBoxActive (newVal, oldVal) {
+      if (oldVal && !newVal && this.dialogType === 'Success') {
+        this.$router.push('/nm')
+      }
     }
   },
   created () {
     this.$store.commit('setAppHeaderInfo', {
       icon: 'mail',
       name: 'Contact Us'
     })
-  },
-  apollo: {
-    form: {
-      query: CONTACT_US_QUERY,
-      variables () {
-        return {
-          input: {
-            fullName: this.name,
-            email: this.email,
-            purpose: this.contactType,
-            message: this.message
-          }
-        }
-      }
-    },
-    skip () {
-      return this.skipQuery
-    }
   }
 }

app/tests/unit/pages/explorer/Home.spec.js

@@ -28,30 +28,30 @@ describe('ExplorerHome.vue', () => {
    * on if searchEnabled is false in the component.
    */
 
-  // it('renders page navs correctly', async () => {
-  //   expect.assertions(1)
-  //   await wrapper.setData({
-  //     pageNavLinks: [
-  //       { icon: 'grid', text: 'test', link: '#' },
-  //       { icon: 'grid', text: 'test2' }
-  //     ]
-  //   })
-  //   const length = wrapper.vm.pageNavLinks.length
-  //   const navLinks = wrapper.findAllComponents('.teams_container')
-  //   expect(navLinks.length).toEqual(length)
-  // })
+  it.skip('renders page navs correctly', async () => {
+    expect.assertions(1)
+    await wrapper.setData({
+      pageNavLinks: [
+        { icon: 'grid', text: 'test', link: '#' },
+        { icon: 'grid', text: 'test2' }
+      ]
+    })
+    const length = wrapper.vm.pageNavLinks.length
+    const navLinks = wrapper.findAllComponents('.teams_container')
+    expect(navLinks.length).toEqual(length)
+  })
 
   it.skip('renders footer', () => {
     expect.assertions(2)
     expect(wrapper.find('.explorer_page_footer').exists()).toBe(true)
     expect(wrapper.find('.explorer_page_footer-text').exists()).toBe(true)
   })
 
-  // it('goes to parameterized query page when clicked', () => {
-  //   const button = wrapper.find('.p_query')
-  //   expect(button.exists()).toBe(true)
-  //   button.trigger('click')
-  //   expect(wrapper.find('.p_query').exists()).toBe(false)
-  //   expect(wrapper.find('.md-title').text()).toBe('Query Template')
-  // })
+  it.skip('goes to parameterized query page when clicked', () => {
+    const button = wrapper.find('.p_query')
+    expect(button.exists()).toBe(true)
+    button.trigger('click')
+    expect(wrapper.find('.p_query').exists()).toBe(false)
+    expect(wrapper.find('.md-title').text()).toBe('Query Template')
+  })
 })

app/tests/unit/pages/nanomine/contactus.spec.js

@@ -44,4 +44,8 @@ describe('ContactUsPage.vue', () => {
     expect(wrapper.findComponent('#email').element.value).toBe('kzunigac@uvm.edu')
     expect(wrapper.findComponent('#nanomine').element.value).toBe('nanomine')
   })
+
+  it('render dialog component properly', async () => {
+    expect(wrapper.findComponent('.dialog-box').exists()).toBeTruthy()
+  })
 })

resfulservice/spec/graphql/resolver/dataset.spec.js

@@ -188,7 +188,6 @@ describe('Dataset Resolver Unit Tests:', function () {
       sinon.stub(Dataset, 'aggregate').returns([{filesets: mockDataset.filesets}]);
       sinon.stub(mockDataset, 'lean').returnsThis();
       const fileset = await getFilesets({}, {input: { filesetName: 'E109_S2_Huang_2016' } }, { user, req, isAuthenticated: true });
-
       expect(fileset).to.have.property('filesetName');
       expect(fileset).to.have.property('files');
       expect(fileset.files).to.be.an('array');