Prettier format all js files

js/components/__tests__/confirmation_popover.test.js

@@ -15,8 +15,8 @@ describe('ConfirmationPopover', () => {
       cancel_btn_text: 'Cancel',
       confirm_btn_text: 'Confirm',
       confirm_msg: 'Are you sure you want to do that?',
-      csrf_token: '42'
+      csrf_token: '42',
-    }
+    },
   })
 
   it('matches snapshot', () => {
@@ -29,4 +29,3 @@ describe('ConfirmationPopover', () => {
     expect(input.attributes('value')).toBe('42')
   })
 })
-

js/components/__tests__/local_datetime.test.js

@@ -2,9 +2,10 @@ import { shallowMount } from '@vue/test-utils'
 
 import LocalDatetime from '../local_datetime'
 
-
 describe('LocalDatetime', () => {
-  const wrapper = shallowMount(LocalDatetime, { propsData: { timestamp: '1977-05-25 00:00:00' } })
+  const wrapper = shallowMount(LocalDatetime, {
+    propsData: { timestamp: '1977-05-25 00:00:00' },
+  })
 
   it('renders a time element', () => {
     expect(wrapper.html()).toContain('<time')
@@ -16,14 +17,12 @@ describe('LocalDatetime', () => {
   })
 
   it('allows specifying a custom format', () => {
-    const wrapperWithCustomFormat = shallowMount(
+    const wrapperWithCustomFormat = shallowMount(LocalDatetime, {
-      LocalDatetime, {
       propsData: {
         timestamp: '1977-05-25 00:00:00',
-          format: 'MMM Do YY'
+        format: 'MMM Do YY',
-        }
+      },
-      }
+    })
-    )
     expect(wrapperWithCustomFormat).toMatchSnapshot()
   })
 })

js/components/__tests__/members_list.test.js

@@ -3,17 +3,20 @@ import { shallowMount } from '@vue/test-utils'
 import MembersList from '../members_list'
 
 describe('MembersList', () => {
-  const members = [{
+  const members = [
+    {
       name: 'Luke Skywalker',
       num_env: 2,
       status: 'active',
-    role: 'developer'
+      role: 'developer',
-  }, {
+    },
+    {
       name: 'Chewie',
       num_env: 3,
       status: 'pending',
-    role: 'admin'
+      role: 'admin',
-  }]
+    },
+  ]
   const role_choices = [
     { display_name: 'Developer', name: 'developer' },
     { display_name: 'Admin', name: 'admin' },
@@ -23,10 +26,13 @@ describe('MembersList', () => {
     { display_name: 'Pending', name: 'pending' },
   ]
 
-  const createWrapper = () => shallowMount(MembersList, {
+  const createWrapper = () =>
+    shallowMount(MembersList, {
       propsData: {
-      members, role_choices, status_choices
+        members,
-    }
+        role_choices,
+        status_choices,
+      },
     })
 
   it('should sort by name by default', () => {

js/components/__tests__/requests_list.test.js

@@ -3,17 +3,20 @@ import { shallowMount } from '@vue/test-utils'
 import RequestsList from '../requests_list'
 
 describe('RequestsList', () => {
-
   describe('isExtended', () => {
     it('should disallow sorting if not extended', () => {
-      const wrapper = shallowMount(RequestsList, { propsData: { isExtended: false } })
+      const wrapper = shallowMount(RequestsList, {
+        propsData: { isExtended: false },
+      })
       expect(wrapper.vm.sort.columnName).toEqual('')
       wrapper.vm.updateSortValue('full_name')
       expect(wrapper.vm.sort.columnName).toEqual('')
     })
 
     it('should allow sorting when in extended mode', () => {
-      const wrapper = shallowMount(RequestsList, { propsData: { isExtended: true } })
+      const wrapper = shallowMount(RequestsList, {
+        propsData: { isExtended: true },
+      })
       expect(wrapper.vm.sort.columnName).toEqual('last_submission_timestamp')
       wrapper.vm.updateSortValue('full_name')
       expect(wrapper.vm.sort.columnName).toEqual('full_name')
@@ -21,25 +24,29 @@ describe('RequestsList', () => {
   })
 
   describe('sorting', () => {
-    const requests = [{
+    const requests = [
+      {
         name: 'X Wing',
         last_edited_timestamp: 'Mon, 2 Jan 2017 12:34:56 GMT',
         last_submission_timestamp: 'Mon, 2 Jan 2017 12:34:56 GMT',
         full_name: 'Luke Skywalker',
         annual_usage: '80000',
         status: 'Approved',
-      dod_component: 'Rebels'
+        dod_component: 'Rebels',
-    }, {
+      },
+      {
         name: 'TIE Fighter',
         last_edited_timestamp: 'Mon, 12 Nov 2018 12:34:56 GMT',
         last_submission_timestamp: 'Mon, 12 Nov 2018 12:34:56 GMT',
         full_name: 'Darth Vader',
         annual_usage: '999999',
         status: 'Approved',
-      dod_component: 'Empire'
+        dod_component: 'Empire',
-    }]
+      },
+    ]
 
-    const mountWrapper = () => shallowMount(RequestsList, { propsData: { requests, isExtended: true } })
+    const mountWrapper = () =>
+      shallowMount(RequestsList, { propsData: { requests, isExtended: true } })
 
     it('should default to sorting by submission recency', () => {
       const wrapper = mountWrapper()
@@ -60,16 +67,20 @@ describe('RequestsList', () => {
       const unsubmittedRequest = {
         name: 'Death Star',
         status: 'Started',
-        last_submission_timestamp: null
+        last_submission_timestamp: null,
       }
       const wrapper = shallowMount(RequestsList, {
         propsData: {
           requests: [unsubmittedRequest, ...requests],
-          isExtended: true
+          isExtended: true,
-        }
+        },
       })
       const displayedRequests = wrapper.vm.filteredRequests
-      expect(displayedRequests).toEqual([requests[1], requests[0], unsubmittedRequest])
+      expect(displayedRequests).toEqual([
+        requests[1],
+        requests[0],
+        unsubmittedRequest,
+      ])
     })
   })
 })

js/components/charts/budget_chart.js

@@ -1,4 +1,10 @@
-import { format, isWithinRange, addMonths, isSameMonth, getMonth } from 'date-fns'
+import {
+  format,
+  isWithinRange,
+  addMonths,
+  isSameMonth,
+  getMonth,
+} from 'date-fns'
 import { abbreviateDollars, formatDollars } from '../../lib/dollars'
 
 const TOP_OFFSET = 20
@@ -11,27 +17,28 @@ export default {
     currentMonth: String,
     expirationDate: String,
     months: Object,
-    budget: String
+    budget: String,
   },
 
-  data: function () {
+  data: function() {
-    const heightScale = this.budget / (CHART_HEIGHT - TOP_OFFSET - BOTTOM_OFFSET)
+    const heightScale =
+      this.budget / (CHART_HEIGHT - TOP_OFFSET - BOTTOM_OFFSET)
     return {
       numMonths: 10,
       focusedMonthPosition: 4,
       height: CHART_HEIGHT,
       heightScale,
-      budgetHeight: CHART_HEIGHT - BOTTOM_OFFSET - (this.budget / heightScale),
+      budgetHeight: CHART_HEIGHT - BOTTOM_OFFSET - this.budget / heightScale,
       baseHeight: CHART_HEIGHT - BOTTOM_OFFSET,
       width: 0,
       displayedMonths: [],
       spendPath: '',
       projectedPath: '',
-      displayBudget: formatDollars(parseFloat(this.budget))
+      displayBudget: formatDollars(parseFloat(this.budget)),
     }
   },
 
-  mounted: function () {
+  mounted: function() {
     this._setDisplayedMonths()
     this._setMetrics()
     addEventListener('load', this._setMetrics)
@@ -39,7 +46,7 @@ export default {
   },
 
   methods: {
-    _setMetrics: function () {
+    _setMetrics: function() {
       this.width = this.$refs.panel.clientWidth
       this.spendPath = ''
       this.projectedPath = ''
@@ -48,16 +55,20 @@ export default {
       let lastSpendPoint = ''
 
       for (let i = 0; i < this.numMonths; i++) {
-        const { metrics, budget, rollingAverage, cumulativeTotal } = this.displayedMonths[i]
+        const {
-        const blockWidth = (this.width / this.numMonths)
+          metrics,
+          budget,
+          rollingAverage,
+          cumulativeTotal,
+        } = this.displayedMonths[i]
+        const blockWidth = this.width / this.numMonths
         const blockX = blockWidth * i
-        const spend = budget && budget.spend
+        const spend = budget && budget.spend ? budget.spend : rollingAverage
-          ? budget.spend
-          : rollingAverage
         const barHeight = spend / this.heightScale
         lastSpend = spend
-        const cumulativeY = this.height - (cumulativeTotal / this.heightScale) - BOTTOM_OFFSET
+        const cumulativeY =
-        const cumulativeX = blockX + blockWidth/2
+          this.height - cumulativeTotal / this.heightScale - BOTTOM_OFFSET
+        const cumulativeX = blockX + blockWidth / 2
         const cumulativePoint = `${cumulativeX} ${cumulativeY}`
 
         this.displayedMonths[i].metrics = Object.assign(metrics, {
@@ -65,26 +76,26 @@ export default {
           blockX,
           barHeight,
           barWidth: 30,
-          barX: blockX + (blockWidth/2 - 15),
+          barX: blockX + (blockWidth / 2 - 15),
           barY: this.height - barHeight - BOTTOM_OFFSET,
           cumulativeR: 2.5,
           cumulativeY,
-          cumulativeX
+          cumulativeX,
         })
 
         if (budget && budget.spend) {
           this.spendPath += this.spendPath === '' ? 'M' : ' L'
           this.spendPath += cumulativePoint
           lastSpendPoint = cumulativePoint
-
         } else if (lastSpendPoint !== '') {
-          this.projectedPath += this.projectedPath === '' ? `M${lastSpendPoint} L` : ' L'
+          this.projectedPath +=
+            this.projectedPath === '' ? `M${lastSpendPoint} L` : ' L'
           this.projectedPath += cumulativePoint
         }
       }
     },
 
-    _setDisplayedMonths: function () {
+    _setDisplayedMonths: function() {
       const [month, year] = this.currentMonth.split('/')
       const [expYear, expMonth, expDate] = this.expirationDate.split('-') // assumes format 'YYYY-MM-DD'
       const monthsRange = []
@@ -101,7 +112,7 @@ export default {
       const end = addMonths(start, this.numMonths + 1)
 
       // expiration date
-      const expires = new Date(expYear, expMonth-1, expDate)
+      const expires = new Date(expYear, expMonth - 1, expDate)
 
       // is the expiration date within the displayed date range?
       const expirationWithinRange = isWithinRange(expires, start, end)
@@ -122,9 +133,15 @@ export default {
 
         const budget = this.months[index] || null
         const spendAmount = budget ? budget.spend : rollingAverage
-        const spendMinusOne = this.months[indexMinusOne] ? this.months[indexMinusOne].spend : rollingAverage
+        const spendMinusOne = this.months[indexMinusOne]
-        const spendMinusTwo = this.months[indexMinusTwo] ? this.months[indexMinusTwo].spend : rollingAverage
+          ? this.months[indexMinusOne].spend
-        const spendMinusThree = this.months[indexMinusThree] ? this.months[indexMinusThree].spend : rollingAverage
+          : rollingAverage
+        const spendMinusTwo = this.months[indexMinusTwo]
+          ? this.months[indexMinusTwo].spend
+          : rollingAverage
+        const spendMinusThree = this.months[indexMinusThree]
+          ? this.months[indexMinusThree].spend
+          : rollingAverage
 
         const isExpirationMonth = isSameMonth(date, expires)
 
@@ -134,12 +151,8 @@ export default {
           cumulativeTotal += spendAmount
         }
 
-        rollingAverage = (
+        rollingAverage =
-            spendAmount
+          (spendAmount + spendMinusOne + spendMinusTwo + spendMinusThree) / 4
-          + spendMinusOne
-          + spendMinusTwo
-          + spendMinusThree
-          ) / 4
 
         monthsRange.push({
           budget,
@@ -153,9 +166,9 @@ export default {
           date: {
             monthIndex: format(date, 'M'),
             month: format(date, 'MMM'),
-            year: format(date,'YYYY')
+            year: format(date, 'YYYY'),
           },
-          showYear: isExpirationMonth || (i === 0) || getMonth(date) === 0,
+          showYear: isExpirationMonth || i === 0 || getMonth(date) === 0,
           isHighlighted: this.currentMonth === index,
           metrics: {
             blockWidth: 0,
@@ -166,12 +179,11 @@ export default {
             barY: 0,
             cumulativeY: 0,
             cumulativeX: 0,
-            cumulativeR: 0
+            cumulativeR: 0,
-          }
+          },
         })
-
       }
       this.displayedMonths = monthsRange
-    }
+    },
-  }
+  },
 }

js/components/checkbox_input.js

@@ -6,11 +6,11 @@ export default {
   },
 
   methods: {
-    onInput: function (e) {
+    onInput: function(e) {
       this.$root.$emit('field-change', {
         value: e.target.checked,
-        name: this.name
+        name: this.name,
       })
-    }
+    },
-  }
+  },
 }

js/components/confirmation_popover.js

@@ -7,7 +7,7 @@ export default {
     cancel_btn_text: String,
     confirm_btn_text: String,
     confirm_msg: String,
-    csrf_token: String
+    csrf_token: String,
   },
 
   template: `
@@ -28,5 +28,5 @@ export default {
       </template>
       <button class="tooltip-target" type="button">{{ btn_text }}</button>
     </v-popover>
-  `
+  `,
 }

js/components/forms/ccpo_approval.js

@@ -6,22 +6,22 @@ export default {
 
   components: {
     textinput,
-    LocalDatetime
+    LocalDatetime,
   },
 
   props: {
-    initialState: String
+    initialState: String,
   },
 
-  data: function () {
+  data: function() {
     return {
       approving: this.initialState === 'approving',
-      denying: this.initialState === 'denying'
+      denying: this.initialState === 'denying',
     }
   },
 
   methods: {
-    setReview: function (e) {
+    setReview: function(e) {
       if (e.target.value === 'approving') {
         this.approving = true
         this.denying = false
@@ -30,5 +30,5 @@ export default {
         this.denying = true
       }
     },
-  }
+  },
 }

js/components/forms/details_of_use.js

@@ -18,47 +18,47 @@ export default {
   props: {
     initialData: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
-    }
+    },
   },
 
-  data: function () {
+  data: function() {
     const {
       estimated_monthly_spend = 0,
       jedi_migration = '',
-      technical_support_team = ''
+      technical_support_team = '',
     } = this.initialData
 
     return {
       estimated_monthly_spend,
       jedi_migration,
-      technical_support_team
+      technical_support_team,
     }
   },
 
   computed: {
-    annualSpend: function () {
+    annualSpend: function() {
       const monthlySpend = this.estimated_monthly_spend || 0
       return monthlySpend * 12
     },
-    annualSpendStr: function () {
+    annualSpendStr: function() {
       return this.formatDollars(this.annualSpend)
     },
-    jediMigrationOptionSelected: function () {
+    jediMigrationOptionSelected: function() {
       return this.jedi_migration !== ''
     },
-    isJediMigration: function () {
+    isJediMigration: function() {
       return this.jedi_migration === 'yes'
     },
-    hasTechnicalSupportTeam: function () {
+    hasTechnicalSupportTeam: function() {
       return this.technical_support_team === 'yes'
-    }
+    },
   },
 
   methods: {
-    formatDollars: function (intValue) {
+    formatDollars: function(intValue) {
       const mask = createNumberMask({ prefix: '$', allowDecimal: true })
       return conformToMask(intValue.toString(), mask).conformedValue
-    }
+    },
-  }
+  },
 }

js/components/forms/edit_application_roles.js

@@ -15,12 +15,12 @@ export default {
 
   props: {
     name: String,
-    id: String
+    id: String,
   },
 
   methods: {
-    doRevoke: function () {
+    doRevoke: function() {
       this.$root.$emit('revoke-' + this.id)
-    }
+    },
-  }
+  },
 }

js/components/forms/edit_environment_role.js

@@ -4,7 +4,6 @@ import Selector from '../selector'
 import Modal from '../../mixins/modal'
 import toggler from '../toggler'
 
-
 export default {
   name: 'edit-environment-role',
 
@@ -14,16 +13,16 @@ export default {
     toggler,
     Modal,
     Selector,
-    textinput
+    textinput,
   },
 
   props: {
     choices: Array,
     initialData: String,
-    applicationId: String
+    applicationId: String,
   },
 
-  data: function () {
+  data: function() {
     return {
       new_role: this.initialData,
     }
@@ -34,19 +33,19 @@ export default {
   },
 
   methods: {
-    change: function (e) {
+    change: function(e) {
       this.new_role = e.target.value
     },
-    cancel: function () {
+    cancel: function() {
       this.new_role = this.initialData
     },
-    revoke: function () {
+    revoke: function() {
-      this.new_role = ""
+      this.new_role = ''
-    }
+    },
   },
 
   computed: {
-    displayName: function () {
+    displayName: function() {
       const newRole = this.newRole
       for (var arr in this.choices) {
         if (this.choices[arr][0] == newRole) {
@@ -54,12 +53,11 @@ export default {
         }
       }
     },
-    label_class: function () {
+    label_class: function() {
-      return this.newRole === "" ?
+      return this.newRole === '' ? 'label' : 'label label--success'
-        "label" : "label label--success"
     },
-    newRole: function () {
+    newRole: function() {
       return this.new_role
-    }
+    },
   },
 }

js/components/forms/financial.js

@@ -17,32 +17,32 @@ export default {
   props: {
     initialData: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
-    }
+    },
   },
 
-  data: function () {
+  data: function() {
-    const {
+    const { funding_type = '' } = this.initialData
-      funding_type = ""
-    } = this.initialData
 
     return {
       funding_type,
-      shouldForceShowTaskOrder: false
+      shouldForceShowTaskOrder: false,
     }
   },
 
   computed: {
     showTaskOrderUpload: function() {
-      return !this.initialData.legacy_task_order.pdf || this.shouldForceShowTaskOrder
+      return (
-    }
+        !this.initialData.legacy_task_order.pdf || this.shouldForceShowTaskOrder
+      )
+    },
   },
 
   methods: {
     forceShowTaskOrderUpload: function(e) {
-      console.log("forceShowTaskOrder", e)
+      console.log('forceShowTaskOrder', e)
       e.preventDefault()
       this.shouldForceShowTaskOrder = true
-    }
+    },
-  }
+  },
 }

js/components/forms/funding.js

@@ -12,21 +12,21 @@ export default {
 
   components: {
     textinput,
-    optionsinput
+    optionsinput,
   },
 
   props: {
     initialData: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     uploadErrors: {
       type: Array,
-      default: () => ([])
+      default: () => [],
-    }
+    },
   },
 
-  data: function () {
+  data: function() {
     const {
       clin_01 = 0,
       clin_02 = 0,
@@ -40,26 +40,27 @@ export default {
       clin_02,
       clin_03,
       clin_04,
-      showUpload: !csp_estimate || this.uploadErrors.length > 0
+      showUpload: !csp_estimate || this.uploadErrors.length > 0,
     }
   },
 
   computed: {
-    totalBudget: function () {
+    totalBudget: function() {
       return [this.clin_01, this.clin_02, this.clin_03, this.clin_04].reduce(
         function(acc, curr) {
           curr = !curr ? 0 : parseInt(curr)
-          return acc + curr;
+          return acc + curr
-        }, 0
+        },
+        0
       )
     },
-    totalBudgetStr: function () {
+    totalBudgetStr: function() {
-      return this.formatDollars(this.totalBudget);
+      return this.formatDollars(this.totalBudget)
     },
   },
 
   methods: {
-    formatDollars: function (intValue) {
+    formatDollars: function(intValue) {
       const mask = createNumberMask({ prefix: '$', allowDecimal: true })
       return conformToMask(intValue.toString(), mask).conformedValue
     },
@@ -68,7 +69,7 @@ export default {
     },
     updateBudget: function() {
       document.querySelector('#to-target').innerText = this.totalBudgetStr
-    }
+    },
   },
 
   watch: {
@@ -80,5 +81,5 @@ export default {
 
   mounted: function() {
     this.updateBudget()
-  }
+  },
 }

js/components/forms/new_application.js

@@ -1,7 +1,7 @@
 import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 
-const createEnvironment = (name) => ({ name })
+const createEnvironment = name => ({ name })
 
 export default {
   name: 'new-application',
@@ -9,97 +9,107 @@ export default {
   mixins: [FormMixin],
 
   components: {
-    textinput
+    textinput,
   },
 
   props: {
     initialData: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
-    modalName: String
+    modalName: String,
   },
 
-  data: function () {
+  data: function() {
-    const {
+    const { environment_names, name } = this.initialData
-      environment_names,
-      name,
-    } = this.initialData
 
-    const environments = (
+    const environments = (environment_names.length > 0
-      environment_names.length > 0
       ? environment_names
-      : ["Development", "Testing", "Staging", "Production"]
+      : ['Development', 'Testing', 'Staging', 'Production']
     ).map(createEnvironment)
 
     return {
       validations: [
-        {func: this.hasEnvironments, message: "Provide at least one environment name."},
+        {
-        {func: this.envNamesAreUnique, message: "Environment names must be unique."},
+          func: this.hasEnvironments,
-        {func: this.environmentsHaveNames, message: "Environment names cannot be empty."},
+          message: 'Provide at least one environment name.',
+        },
+        {
+          func: this.envNamesAreUnique,
+          message: 'Environment names must be unique.',
+        },
+        {
+          func: this.environmentsHaveNames,
+          message: 'Environment names cannot be empty.',
+        },
       ],
       errors: [],
       environments,
       name,
-      readyToSubmit: false
+      readyToSubmit: false,
     }
   },
 
-  mounted: function () {
+  mounted: function() {
     this.$root.$on('onEnvironmentAdded', this.addEnvironment)
   },
 
   methods: {
-    addEnvironment: function (event) {
+    addEnvironment: function(event) {
-      this.environments.push(createEnvironment(""))
+      this.environments.push(createEnvironment(''))
     },
 
-    removeEnvironment: function (index) {
+    removeEnvironment: function(index) {
       if (this.environments.length > 1) {
         this.environments.splice(index, 1)
       }
     },
 
     validate: function() {
-      this.errors = this.validations.map((validation) => {
+      this.errors = this.validations
+        .map(validation => {
           if (!validation.func()) {
             return validation.message
           }
-      }).filter(Boolean)
+        })
+        .filter(Boolean)
     },
 
-    hasEnvironments: function () {
+    hasEnvironments: function() {
-      return this.environments.length > 0 && this.environments.some((e) => e.name !== "")
+      return (
+        this.environments.length > 0 &&
+        this.environments.some(e => e.name !== '')
+      )
     },
 
-    environmentsHaveNames: function () {
+    environmentsHaveNames: function() {
       if (this.environments.length > 1) {
         // only want to display this error if we have multiple envs and one or
         // more do not have names
-        return this.environments.every((e) => e.name !== "")
+        return this.environments.every(e => e.name !== '')
       } else {
         return true
       }
     },
 
-    envNamesAreUnique: function () {
+    envNamesAreUnique: function() {
-      const names = this.environments.map((e) => e.name)
+      const names = this.environments.map(e => e.name)
       return names.every((n, index) => names.indexOf(n) === index)
     },
 
-    handleSubmit: function (event) {
+    handleSubmit: function(event) {
       if (!this.readyToSubmit) {
         event.preventDefault()
         this.validateAndOpenModal()
       }
     },
 
-    handleCancelSubmit: function () {
+    handleCancelSubmit: function() {
       this.readyToSubmit = false
       this.closeModal(this.modalName)
     },
 
-    validateAndOpenModal: function () {
+    validateAndOpenModal: function() {
       let isValid = this.$children.reduce((previous, newVal) => {
         // display textInput error if it is not valid
         if (!newVal.showValid) {
@@ -116,6 +126,6 @@ export default {
         this.readyToSubmit = true
         this.openModal(this.modalName)
       }
-    }
+    },
-  }
+  },
 }

js/components/forms/oversight.js

@@ -15,11 +15,11 @@ export default {
   props: {
     initialData: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
-    }
+    },
   },
 
-  data: function () {
+  data: function() {
     const {
       am_cor = false,
       ko_invite = false,
@@ -33,5 +33,5 @@ export default {
       cor_invite,
       so_invite,
     }
-  }
+  },
 }

js/components/forms/poc.js

@@ -15,17 +15,15 @@ export default {
   props: {
     initialData: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
-    }
+    },
   },
 
-  data: function () {
+  data: function() {
-    const {
+    const { am_poc = false } = this.initialData
-      am_poc = false
-    } = this.initialData
 
     return {
-        am_poc
+      am_poc,
-    }
     }
+  },
 }

js/components/local_datetime.js

@@ -7,15 +7,15 @@ export default {
     timestamp: String,
     format: {
       type: String,
-      default: 'MMM D YYYY H:mm'
+      default: 'MMM D YYYY H:mm',
-    }
+    },
   },
 
   computed: {
-    displayTime: function () {
+    displayTime: function() {
       return format(this.timestamp, this.format)
-    }
+    },
   },
 
-  template: '<time v-bind:datetime="timestamp">{{ displayTime }}</time>'
+  template: '<time v-bind:datetime="timestamp">{{ displayTime }}</time>',
 }

js/components/members_list.js

@@ -1,36 +1,46 @@
-import { compose, sortBy, reverse, indexBy, partial, prop, pipe, toLower } from 'ramda'
+import {
+  compose,
+  sortBy,
+  reverse,
+  indexBy,
+  partial,
+  prop,
+  pipe,
+  toLower,
+} from 'ramda'
 
 const search = (query, members) => {
   if (query === '' || query === 'all') {
     return members
   } else {
     const normalizedQuery = query.toLowerCase()
-    return members.filter(
+    return members.filter(member =>
-      (member) => member.name.toLowerCase().includes(normalizedQuery)
+      member.name.toLowerCase().includes(normalizedQuery)
     )
   }
 }
 
 const filterByStatus = (status, statusesByDisplayName, members) => {
-  const getStatusFromDisplayName = (_status) => statusesByDisplayName[_status].name
+  const getStatusFromDisplayName = _status =>
+    statusesByDisplayName[_status].name
 
   if (status === '' || status === 'all') {
     return members
   } else {
     return members.filter(
-      (member) => getStatusFromDisplayName(member.status) === status
+      member => getStatusFromDisplayName(member.status) === status
     )
   }
 }
 
 const filterByRole = (role, rolesByDisplayname, members) => {
-  const getRoleNameFromDisplayName = (_role) => rolesByDisplayname[_role].name
+  const getRoleNameFromDisplayName = _role => rolesByDisplayname[_role].name
 
   if (role === '' || role === 'all') {
     return members
   } else {
     return members.filter(
-      (member) => getRoleNameFromDisplayName(member.role) === role
+      member => getRoleNameFromDisplayName(member.role) === role
     )
   }
 }
@@ -42,9 +52,7 @@ const sort = (sortInfo, members) => {
     const sortColumn = sortInfo.columns[sortInfo.columnName]
     const sortedMembers = sortColumn.sortFunc(sortColumn.attr, members)
 
-    return sortInfo.isAscending ?
+    return sortInfo.isAscending ? sortedMembers : reverse(sortedMembers)
-      sortedMembers :
-      reverse(sortedMembers)
   }
 }
 
@@ -57,9 +65,12 @@ export default {
     status_choices: Array,
   },
 
-  data: function () {
+  data: function() {
     const alphabeticalSort = (attr, members) => {
-      const lowercaseProp = compose(toLower, prop(attr))
+      const lowercaseProp = compose(
+        toLower,
+        prop(attr)
+      )
       return sortBy(lowercaseProp, members)
     }
 
@@ -70,18 +81,18 @@ export default {
         displayName: 'Name',
         attr: 'name',
         sortFunc: alphabeticalSort,
-        width: "50%"
+        width: '50%',
       },
       {
         displayName: 'Environments',
         attr: 'num_env',
         sortFunc: numericSort,
-        class: "table-cell--align-right"
+        class: 'table-cell--align-right',
       },
       {
         displayName: 'Status',
         attr: 'status',
-        sortFunc: alphabeticalSort
+        sortFunc: alphabeticalSort,
       },
       {
         displayName: 'Portfolio Role',
@@ -101,20 +112,20 @@ export default {
       sortInfo: {
         columnName: defaultSortColumn,
         isAscending: true,
-        columns: indexBy(prop('displayName'), columns)
+        columns: indexBy(prop('displayName'), columns),
       },
     }
   },
 
   computed: {
-    searchedList: function () {
+    searchedList: function() {
       return pipe(
         partial(search, [this.searchValue]),
         partial(filterByStatus, [this.status, this.statusesByDisplayName]),
         partial(filterByRole, [this.role, this.rolesByDisplayName]),
         partial(sort, [this.sortInfo])
       )(this.members)
-    }
+    },
   },
 
   methods: {
@@ -128,8 +139,8 @@ export default {
     },
     getColumns: function() {
       return Object.values(this.sortInfo.columns)
-    }
+    },
   },
 
-  template: '<div></div>'
+  template: '<div></div>',
 }

js/components/multi_checkbox_input.js

@@ -13,33 +13,36 @@ export default {
     name: String,
     initialErrors: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     initialValue: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     initialOtherValue: String,
   },
 
-
+  data: function() {
-  data: function () {
     const showError = (this.initialErrors && this.initialErrors.length) || false
     return {
       showError: showError,
       showValid: !showError && this.initialValue.length > 0,
       validationError: this.initialErrors.join(' '),
-      otherChecked: this.initialValue.includes("other") ? true : this.otherChecked,
+      otherChecked: this.initialValue.includes('other')
-      otherText: this.initialValue.includes("other") ? this.initialOtherValue : '',
+        ? true
-      selections: this.initialValue
+        : this.otherChecked,
+      otherText: this.initialValue.includes('other')
+        ? this.initialOtherValue
+        : '',
+      selections: this.initialValue,
     }
   },
 
   methods: {
-    onInput: function (e) {
+    onInput: function(e) {
       this.$root.$emit('field-change', {
         value: e.target.value,
-        name: this.name
+        name: this.name,
       })
       this.showError = false
       this.showValid = true
@@ -47,5 +50,5 @@ export default {
     otherToggle: function() {
       this.otherChecked = !this.otherChecked
     },
-  }
+  },
 }

js/components/options_input.js

@@ -5,30 +5,28 @@ export default {
     name: String,
     initialErrors: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     initialValue: String,
   },
 
-
+  data: function() {
-  data: function () {
     const showError = (this.initialErrors && this.initialErrors.length) || false
     return {
       showError: showError,
       showValid: !showError && !!this.initialValue,
-      validationError: this.initialErrors.join(' ')
+      validationError: this.initialErrors.join(' '),
     }
   },
 
-
   methods: {
-    onInput: function (e) {
+    onInput: function(e) {
       this.$root.$emit('field-change', {
         value: e.target.value,
-        name: this.name
+        name: this.name,
       })
       this.showError = false
       this.showValid = true
-    }
+    },
-  }
+  },
 }

js/components/requests_list.js

@@ -1,7 +1,16 @@
 import LocalDatetime from '../components/local_datetime'
 import { formatDollars } from '../lib/dollars'
 import { parse } from 'date-fns'
-import { compose, partial, indexBy, prop, propOr, sortBy, reverse, pipe } from 'ramda'
+import {
+  compose,
+  partial,
+  indexBy,
+  prop,
+  propOr,
+  sortBy,
+  reverse,
+  pipe,
+} from 'ramda'
 
 export default {
   name: 'requests-list',
@@ -26,13 +35,17 @@ export default {
     dodComponents: {
       type: Array,
       default: () => [],
-    }
+    },
   },
 
-  data: function () {
+  data: function() {
-    const defaultSort = (sort, requests) => sortBy(prop(sort.columnName), requests)
+    const defaultSort = (sort, requests) =>
+      sortBy(prop(sort.columnName), requests)
     const dateSort = (sort, requests) => {
-      const parseDate = compose(partial(parse), propOr(sort.columnName, ''))
+      const parseDate = compose(
+        partial(parse),
+        propOr(sort.columnName, '')
+      )
       return sortBy(parseDate, requests)
     }
 
@@ -84,43 +97,40 @@ export default {
       dodComponentValue: '',
       sort: {
         columnName: defaultSortColumn,
-        isAscending: false
+        isAscending: false,
       },
       columns: indexBy(prop('attr'), columnList),
     }
   },
 
   computed: {
-    filteredRequests: function () {
+    filteredRequests: function() {
       return pipe(
         partial(this.applySearch, [this.searchValue]),
         partial(this.applyFilters, [this.statusValue, this.dodComponentValue]),
-        partial(this.applySort, [this.sort]),
+        partial(this.applySort, [this.sort])
       )(this.requests)
-    }
+    },
   },
 
   methods: {
     getColumns: function() {
-      return Object.values(this.columns)
+      return Object.values(this.columns).filter(
-        .filter((column) => !column.extendedOnly || this.isExtended)
+        column => !column.extendedOnly || this.isExtended
+      )
     },
     applySearch: (query, requests) => {
-      return requests.filter(
+      return requests.filter(request =>
-        (request) => query !== '' ?
+        query !== ''
-          request.name.toLowerCase().includes(query.toLowerCase()) :
+          ? request.name.toLowerCase().includes(query.toLowerCase())
-          true
+          : true
       )
     },
     applyFilters: (status, dodComponent, requests) => {
-      return requests.filter(
+      return requests
-        (request) => status !== '' ?
+        .filter(request => (status !== '' ? request.status === status : true))
-          request.status === status :
+        .filter(request =>
-          true
+          dodComponent !== '' ? request.dod_component === dodComponent : true
-      ).filter(
-        (request) => dodComponent !== '' ?
-          request.dod_component === dodComponent :
-          true
         )
     },
     applySort: function(sort, requests) {
@@ -129,23 +139,23 @@ export default {
       } else {
         const { sortFunc } = this.columns[sort.columnName]
         const sorted = sortFunc(sort, requests)
-        return sort.isAscending ?
+        return sort.isAscending ? sorted : reverse(sorted)
-          sorted :
-          reverse(sorted)
       }
     },
-    dollars: (value) => formatDollars(value, false),
+    dollars: value => formatDollars(value, false),
     updateSortValue: function(columnName) {
-      if (!this.isExtended) { return }
+      if (!this.isExtended) {
+        return
+      }
 
       // toggle ascending / descending if column is clicked twice
       if (columnName === this.sort.columnName) {
         this.sort.isAscending = !this.sort.isAscending
       }
 
-      this.sort.columnName = columnName;
+      this.sort.columnName = columnName
     },
   },
 
-  template: '<div></div>'
+  template: '<div></div>',
 }

js/components/selector.js

@@ -10,37 +10,36 @@ const SelectorInput = {
     selected: Boolean,
     handleChange: Function,
     handleEnter: Function,
-    handleEsc: Function
+    handleEsc: Function,
   },
 
   computed: {
-    id: function () {
+    id: function() {
       return `${this.name}_${this.value}`
-    }
+    },
   },
 
   methods: {
-    onChange: function (e) {
+    onChange: function(e) {
       this.handleChange(this.value)
     },
 
-    onEnter: function (e) {
+    onEnter: function(e) {
       this.handleEnter()
     },
 
-    onEsc: function (e) {
+    onEsc: function(e) {
       this.handleEsc()
-    }
+    },
-  }
+  },
 }
 
-
 export default {
   name: 'selector',
 
   components: {
     VPopover,
-    SelectorInput
+    SelectorInput,
   },
 
   props: {
@@ -49,41 +48,41 @@ export default {
     initialErrors: Array,
     initialChoice: {
       type: String,
-      default: null
+      default: null,
-    }
+    },
   },
 
-  data: function () {
+  data: function() {
     return {
       value: this.initialChoice || null,
       currentChoice: this.initialChoice || null,
       showError: (this.initialErrors && this.initialErrors.length) || false,
-      usingKeyboard: false
+      usingKeyboard: false,
     }
   },
 
   computed: {
-    label: function () {
+    label: function() {
       if (this.value) {
-        const selectedChoice = this.choices.find((choice) => {
+        const selectedChoice = this.choices.find(choice => {
           return this.value === choice[0]
         })[1]
         return selectedChoice.name
       } else {
         return this.defaultLabel
       }
-    }
+    },
   },
 
   methods: {
-
+    change: function(value) {
-    change: function (value) {
       this.value = value
       this.showError = false
     },
 
-    onShow: function () {
+    onShow: function() {
-      setTimeout(() => { // timeout is a hack to make focus work in Chrome
+      setTimeout(() => {
+        // timeout is a hack to make focus work in Chrome
         const selected = this.$refs.choices.find(choice => choice.selected)
         if (selected) {
           selected.$refs.input[0].focus()
@@ -93,26 +92,26 @@ export default {
       }, 100)
     },
 
-    enter: function () {
+    enter: function() {
       this.$refs.popover.hide()
     },
 
-    esc: function () {
+    esc: function() {
       this.value = this.currentChoice
       this.usingKeyboard = false
       this.$refs.popover.hide()
     },
 
-    handleEnterOption: function (e) {
+    handleEnterOption: function(e) {
       this.change(e.target.value)
       this.currentChoice = e.target.value
       this.usingKeyboard = false
       this.$refs.popover.hide()
     },
 
-    handleButtonArrowDown: function (e) {
+    handleButtonArrowDown: function(e) {
       this.usingKeyboard = true
       this.$refs.popover.show()
-    }
+    },
   },
 }

js/components/tables/spend_table.js

@@ -10,36 +10,39 @@ export default {
     environments: Object,
     currentMonthIndex: String,
     prevMonthIndex: String,
-    twoMonthsAgoIndex: String
+    twoMonthsAgoIndex: String,
   },
 
-  data: function () {
+  data: function() {
     return {
-      applicationsState: this.applications
+      applicationsState: this.applications,
     }
   },
 
-  created: function () {
+  created: function() {
     Object.keys(this.applications).forEach(application => {
       set(this.applicationsState[application], 'isVisible', false)
     })
   },
 
   methods: {
-    toggle: function (e, applicationName) {
+    toggle: function(e, applicationName) {
       this.applicationsState = Object.assign(this.applicationsState, {
-        [applicationName]: Object.assign(this.applicationsState[applicationName],{
+        [applicationName]: Object.assign(
-          isVisible: !this.applicationsState[applicationName].isVisible
+          this.applicationsState[applicationName],
-        })
+          {
+            isVisible: !this.applicationsState[applicationName].isVisible,
+          }
+        ),
       })
     },
 
-    formatDollars: function (value) {
+    formatDollars: function(value) {
       return formatDollars(value, false)
     },
 
-    round: function (value) {
+    round: function(value) {
       return Math.round(value)
-    }
+    },
-  }
+  },
 }

js/components/tables/task_order_list.js

@@ -11,9 +11,7 @@ const sort = (sortInfo, members) => {
     const sortColumn = sortInfo.columns[sortInfo.columnName]
     const sortedMembers = sortColumn.sortFunc(sortColumn.attr, members)
 
-    return sortInfo.isAscending ?
+    return sortInfo.isAscending ? sortedMembers : reverse(sortedMembers)
-      sortedMembers :
-      reverse(sortedMembers)
   }
 }
 
@@ -22,16 +20,19 @@ export default {
 
   props: {
     data: Array,
-    expired: Boolean
+    expired: Boolean,
   },
 
   components: {
-    localDatetime
+    localDatetime,
   },
 
-  data: function () {
+  data: function() {
     const alphabeticalSort = (attr, members) => {
-      const lowercaseProp = compose(toLower, prop(attr))
+      const lowercaseProp = compose(
+        toLower,
+        prop(attr)
+      )
       return sortBy(lowercaseProp, members)
     }
 
@@ -45,23 +46,23 @@ export default {
         displayName: 'Period of Performance',
         attr: 'start_date',
         sortFunc: numericSort,
-        width: "50%"
+        width: '50%',
       },
       {
         displayName: 'Initial Value',
         attr: 'budget',
-        class: "table-cell--align-right",
+        class: 'table-cell--align-right',
-        sortFunc: numericSort
+        sortFunc: numericSort,
       },
       {
         displayName: this.expired ? 'Expired Balance' : 'Balance',
         attr: 'budget',
-        class: "table-cell--align-right",
+        class: 'table-cell--align-right',
-        sortFunc: numericSort
+        sortFunc: numericSort,
       },
       {
-        displayName: ''
+        displayName: '',
-      }
+      },
     ]
 
     const defaultSortColumn = 'Period of Performance'
@@ -69,15 +70,15 @@ export default {
       sortInfo: {
         columnName: defaultSortColumn,
         isAscending: false,
-        columns: indexBy(prop('displayName'), columns)
+        columns: indexBy(prop('displayName'), columns),
-      }
+      },
     }
   },
 
   computed: {
-    taskOrders: function () {
+    taskOrders: function() {
       return sort(this.sortInfo, this.data)
-    }
+    },
   },
 
   methods: {
@@ -94,10 +95,10 @@ export default {
       return Object.values(this.sortInfo.columns)
     },
 
-    formatDollars: function (value) {
+    formatDollars: function(value) {
       return formatDollars(value, false)
-    }
+    },
   },
 
-  template: '<div></div>'
+  template: '<div></div>',
 }

js/components/text_input.js

@@ -5,54 +5,58 @@ export default {
   name: 'textinput',
 
   components: {
-    MaskedInput
+    MaskedInput,
   },
 
   props: {
     name: String,
     validation: {
       type: String,
-      default: () => 'anything'
+      default: () => 'anything',
     },
     initialValue: {
       type: String,
-      default: () => ''
+      default: () => '',
     },
     initialErrors: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     paragraph: String,
-    noMaxWidth: String
+    noMaxWidth: String,
   },
 
-  data: function () {
+  data: function() {
     return {
       showError: (this.initialErrors && this.initialErrors.length) || false,
       showValid: false,
       mask: inputValidations[this.validation].mask,
       pipe: inputValidations[this.validation].pipe || undefined,
-      keepCharPositions: inputValidations[this.validation].keepCharPositions || false,
+      keepCharPositions:
-      validationError: this.initialErrors.join(' ') || inputValidations[this.validation].validationError,
+        inputValidations[this.validation].keepCharPositions || false,
+      validationError:
+        this.initialErrors.join(' ') ||
+        inputValidations[this.validation].validationError,
       value: this.initialValue,
-      modified: false
+      modified: false,
     }
   },
 
-  computed:{
+  computed: {
-    rawValue: function () {
+    rawValue: function() {
       return this._rawValue(this.value)
-    }
+    },
   },
 
-  mounted: function () {
+  mounted: function() {
     if (this.value) {
       this._checkIfValid({ value: this.value, invalidate: true })
 
       if (this.mask && this.validation !== 'email') {
-        const mask = typeof this.mask.mask !== 'function'
+        const mask =
+          typeof this.mask.mask !== 'function'
             ? this.mask
-          : mask.mask(this.value).filter((val) => val !== '[]')
+            : mask.mask(this.value).filter(val => val !== '[]')
 
         this.value = conformToMask(this.value, mask).conformedValue
       }
@@ -61,7 +65,7 @@ export default {
 
   methods: {
     // When user types a character
-    onInput: function (e) {
+    onInput: function(e) {
       // When we use the native textarea element, we receive an event object
       // When we use the masked-input component, we receive the value directly
       const value = typeof e === 'object' ? e.target.value : e
@@ -71,13 +75,13 @@ export default {
     },
 
     // When field is blurred (un-focused)
-    onChange: function (e) {
+    onChange: function(e) {
       // Only invalidate the field when it blurs
       this._checkIfValid({ value: e.target.value, invalidate: true })
     },
 
     //
-    _checkIfValid: function ({ value, invalidate = false}) {
+    _checkIfValid: function({ value, invalidate = false }) {
       // Validate the value
       let valid = this._validate(value)
 
@@ -95,24 +99,27 @@ export default {
       } else if (invalidate) {
         this.showError = true
       }
-      this.showValid = this.value != "" && valid
+      this.showValid = this.value != '' && valid
 
       // Emit a change event
       this.$root.$emit('field-change', {
         value: this._rawValue(value),
         valid,
-        name: this.name
+        name: this.name,
       })
     },
 
-    _rawValue: function (value) {
+    _rawValue: function(value) {
-      return inputValidations[this.validation].unmask.reduce((currentValue, character) => {
+      return inputValidations[this.validation].unmask.reduce(
+        (currentValue, character) => {
           return currentValue.split(character).join('')
-      }, value)
+        },
+        value
+      )
     },
 
-    _validate: function (value) {
+    _validate: function(value) {
       return inputValidations[this.validation].match.test(this._rawValue(value))
-    }
+    },
-  }
+  },
 }

js/components/toggler.js

@@ -4,29 +4,29 @@ export default {
   props: {
     defaultVisible: {
       type: Boolean,
-      default: () => false
+      default: () => false,
-    }
+    },
   },
 
-  data: function () {
+  data: function() {
     return {
-      isVisible: this.defaultVisible
+      isVisible: this.defaultVisible,
     }
   },
 
-  render: function (createElement) {
+  render: function(createElement) {
-    return createElement( this.$vnode.data.tag, [
+    return createElement(this.$vnode.data.tag, [
       this.$scopedSlots.default({
         isVisible: this.isVisible,
-        toggle: this.toggle
+        toggle: this.toggle,
-      })
+      }),
     ])
   },
 
   methods: {
-    toggle: function (e) {
+    toggle: function(e) {
       e.preventDefault()
       this.isVisible = !this.isVisible
-    }
+    },
-  }
+  },
 }

js/index.js

@@ -2,7 +2,6 @@ import 'svg-innerhtml'
 import 'babel-polyfill'
 import ally from 'ally.js'
 
-
 import classes from '../styles/atat.scss'
 import Vue from 'vue/dist/vue'
 import VTooltip from 'v-tooltip'
@@ -30,7 +29,7 @@ import MembersList from './components/members_list'
 import LocalDatetime from './components/local_datetime'
 import RequestsList from './components/requests_list'
 import ConfirmationPopover from './components/confirmation_popover'
-import {isNotInVerticalViewport} from './lib/viewport'
+import { isNotInVerticalViewport } from './lib/viewport'
 
 Vue.config.productionTip = false
 
@@ -70,24 +69,27 @@ const app = new Vue({
       if (isOpen) {
         document.body.className += ' modal-open'
       } else {
-        document.body.className = document.body.className.replace(' modal-open', '')
+        document.body.className = document.body.className.replace(
+          ' modal-open',
+          ''
+        )
       }
     })
 
-    const modalOpen = document.querySelector("#modalOpen")
+    const modalOpen = document.querySelector('#modalOpen')
 
     if (modalOpen) {
-      const modal = modalOpen.getAttribute("data-modal")
+      const modal = modalOpen.getAttribute('data-modal')
       this.openModal(modal)
     }
 
-    ally.query.focusable().forEach( function(el) {
+    ally.query.focusable().forEach(function(el) {
-      el.addEventListener('focus', function(){
+      el.addEventListener('focus', function() {
         if (isNotInVerticalViewport(el)) {
-          el.scrollIntoView({block: 'center'})
+          el.scrollIntoView({ block: 'center' })
         }
       })
     })
   },
-  delimiters: ['!{', '}']
+  delimiters: ['!{', '}'],
 })

js/lib/dollars.js

@@ -8,12 +8,19 @@ export const formatDollars = (value, cents = true) => {
 }
 
 export const abbreviateDollars = (value, decimals = 1) => {
-  if (value === null) { return null } // terminate early
+  if (value === null) {
-  if (value === 0) { return '0' } // terminate early
+    return null
-  var b = (value).toPrecision(2).split("e"), // get power
+  } // terminate early
+  if (value === 0) {
+    return '0'
+  } // terminate early
+  var b = value.toPrecision(2).split('e'), // get power
     k = b.length === 1 ? 0 : Math.floor(Math.min(b[1].slice(1), 14) / 3), // floor at decimals, ceiling at trillions
-      c = k < 1 ? value.toFixed(0 + decimals) : (value / Math.pow(10, k * 3) ).toFixed(decimals), // divide by power
+    c =
+      k < 1
+        ? value.toFixed(0 + decimals)
+        : (value / Math.pow(10, k * 3)).toFixed(decimals), // divide by power
     d = c < 0 ? c : Math.abs(c), // enforce -0 is 0
-      e = d + ['', 'k', 'M', 'B', 'T'][k]; // append power
+    e = d + ['', 'k', 'M', 'B', 'T'][k] // append power
-  return e;
+  return e
 }

js/lib/input_validations.js

@@ -7,86 +7,121 @@ export default {
     mask: false,
     match: /\s*/,
     unmask: [],
-    validationError: 'Please enter a response'
+    validationError: 'Please enter a response',
   },
   requiredField: {
     mask: false,
     match: /.+/,
     unmask: [],
-    validationError: 'This field is required'
+    validationError: 'This field is required',
   },
   integer: {
     mask: createNumberMask({ prefix: '', allowDecimal: false }),
     match: /^[1-9]\d*$/,
     unmask: [','],
-    validationError: 'Please enter a number'
+    validationError: 'Please enter a number',
   },
   dollars: {
     mask: createNumberMask({ prefix: '$', allowDecimal: true }),
     match: /^-?\d+\.?\d*$/,
-    unmask: ['$',','],
+    unmask: ['$', ','],
-    validationError: 'Please enter a dollar amount'
+    validationError: 'Please enter a dollar amount',
   },
   gigabytes: {
-    mask: createNumberMask({ prefix: '', suffix:' GB', allowDecimal: false }),
+    mask: createNumberMask({ prefix: '', suffix: ' GB', allowDecimal: false }),
     match: /^[1-9]\d*$/,
-    unmask: [',',' GB'],
+    unmask: [',', ' GB'],
-    validationError: 'Please enter an amount of data in gigabytes'
+    validationError: 'Please enter an amount of data in gigabytes',
   },
   email: {
     mask: emailMask,
     match: /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/i,
     unmask: [],
-    validationError: 'Please enter a valid e-mail address'
+    validationError: 'Please enter a valid e-mail address',
   },
   date: {
-    mask: [/\d/,/\d/,'/',/\d/,/\d/,'/',/\d/,/\d/,/\d/,/\d/],
+    mask: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
     match: /(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.](19|20)\d\d/,
     unmask: [],
     pipe: createAutoCorrectedDatePipe('mm/dd/yyyy HH:MM'),
     keepCharPositions: true,
-    validationError: 'Please enter a valid date in the form MM/DD/YYYY'
+    validationError: 'Please enter a valid date in the form MM/DD/YYYY',
   },
   usPhone: {
-    mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+    mask: [
+      '(',
+      /[1-9]/,
+      /\d/,
+      /\d/,
+      ')',
+      ' ',
+      /\d/,
+      /\d/,
+      /\d/,
+      '-',
+      /\d/,
+      /\d/,
+      /\d/,
+      /\d/,
+    ],
     match: /^\d{10}$/,
-    unmask: ['(',')','-',' '],
+    unmask: ['(', ')', '-', ' '],
-    validationError: 'Please enter a 10-digit phone number'
+    validationError: 'Please enter a 10-digit phone number',
   },
   phoneExt: {
-    mask: createNumberMask({ prefix: '', allowDecimal: false, integerLimit: 10, allowLeadingZeroes: true, includeThousandsSeparator: false }),
+    mask: createNumberMask({
+      prefix: '',
+      allowDecimal: false,
+      integerLimit: 10,
+      allowLeadingZeroes: true,
+      includeThousandsSeparator: false,
+    }),
     match: /^\d{0,10}$/,
     unmask: [],
-    validationError: 'Optional: Please enter up to 10 digits'
+    validationError: 'Optional: Please enter up to 10 digits',
   },
   dodId: {
-    mask: createNumberMask({ prefix: '', allowDecimal: false, allowLeadingZeroes: true, includeThousandsSeparator: false }),
+    mask: createNumberMask({
+      prefix: '',
+      allowDecimal: false,
+      allowLeadingZeroes: true,
+      includeThousandsSeparator: false,
+    }),
     match: /^\d{10}$/,
     unmask: [],
-    validationError: 'Please enter a 10-digit DoD ID number'
+    validationError: 'Please enter a 10-digit DoD ID number',
   },
   peNumber: {
     mask: false,
     match: /(0\d)(0\d)(\d{3})([a-z,A-Z]{1,3})/,
     unmask: ['_'],
-    validationError: 'Please enter a valid PE number. Note that it should be 7 digits followed by 1-3 letters, and should have a zero as the first and third digits.'
+    validationError:
+      'Please enter a valid PE number. Note that it should be 7 digits followed by 1-3 letters, and should have a zero as the first and third digits.',
   },
   treasuryCode: {
-    mask: createNumberMask({ prefix: '', allowDecimal: false, allowLeadingZeroes: true, includeThousandsSeparator: false }),
+    mask: createNumberMask({
+      prefix: '',
+      allowDecimal: false,
+      allowLeadingZeroes: true,
+      includeThousandsSeparator: false,
+    }),
     match: /^0*([1-9]{4}|[1-9]{6})$/,
     unmask: [],
-    validationError: 'Please enter a valid Program Treasury Code. Note that it should be a four digit or six digit number, optionally prefixed by one or more zeros.'
+    validationError:
+      'Please enter a valid Program Treasury Code. Note that it should be a four digit or six digit number, optionally prefixed by one or more zeros.',
   },
   baCode: {
     mask: false,
     match: /[0-9]{2}\w?$/,
     unmask: [],
-    validationError: 'Please enter a valid BA Code. Note that it should be two digits, followed by an optional letter.'
+    validationError:
+      'Please enter a valid BA Code. Note that it should be two digits, followed by an optional letter.',
   },
   portfolioName: {
     mask: false,
     match: /^.{4,100}$/,
     unmask: [],
-    validationError: 'Portfolio and request names must be at least 4 and not more than 100 characters'
+    validationError:
+      'Portfolio and request names must be at least 4 and not more than 100 characters',
   },
 }

js/lib/viewport.js

@@ -1,11 +1,11 @@
-export const isNotInVerticalViewport = (el) => {
+export const isNotInVerticalViewport = el => {
   const bounds = el.getBoundingClientRect()
 
   if (bounds.top < 0) {
     return true
   }
 
-  if (bounds.bottom > ((window.innerHeight - 50))) {
+  if (bounds.bottom > window.innerHeight - 50) {
     // 50 is a magic number to offset for the sticky footer
     // see variables.scss for $footer-height
     return true

js/mixins/form.js

@@ -1,14 +1,14 @@
 export default {
-  mounted: function () {
+  mounted: function() {
     this.$root.$on('field-change', this.handleFieldChange)
   },
 
   methods: {
-    handleFieldChange: function (event) {
+    handleFieldChange: function(event) {
       const { value, name } = event
       if (typeof this[name] !== undefined) {
         this[name] = value
       }
     },
-  }
+  },
 }

js/mixins/modal.js

@@ -8,25 +8,25 @@ export default {
       if (this.allyHandler) this.allyHandler.disengage()
     },
 
-    openModal: function (name) {
+    openModal: function(name) {
       this.activeModal = name
       this.$emit('modalOpen', true)
       const idSelector = `#${this.modalId}`
 
       this.allyHandler = ally.maintain.disabled({
-        filter: idSelector
+        filter: idSelector,
-      });
+      })
-    }
+    },
   },
   data: function() {
     return {
       activeModal: null,
-      allyHandler: null
+      allyHandler: null,
     }
   },
   computed: {
-    modalId: function () {
+    modalId: function() {
-      return !!this.activeModal ? `modal--${ this.activeModal }` : null
+      return !!this.activeModal ? `modal--${this.activeModal}` : null
-    }
+    },
-  }
+  },
 }