From 619bc9fe591e0b2bc84e9fa060f692af9c28df73 Mon Sep 17 00:00:00 2001 From: George Drummond Date: Thu, 24 Jan 2019 09:38:43 -0500 Subject: [PATCH] Prettier format all js files --- .../__tests__/confirmation_popover.test.js | 5 +- .../__tests__/local_datetime.test.js | 19 ++-- js/components/__tests__/members_list.test.js | 38 ++++---- js/components/__tests__/requests_list.test.js | 61 +++++++------ js/components/charts/budget_chart.js | 86 +++++++++++-------- js/components/checkbox_input.js | 8 +- js/components/confirmation_popover.js | 4 +- js/components/forms/ccpo_approval.js | 12 +-- js/components/forms/details_of_use.js | 28 +++--- js/components/forms/edit_application_roles.js | 8 +- js/components/forms/edit_environment_role.js | 28 +++--- js/components/forms/financial.js | 24 +++--- js/components/forms/funding.js | 29 ++++--- js/components/forms/new_application.js | 82 ++++++++++-------- js/components/forms/oversight.js | 16 ++-- js/components/forms/poc.js | 14 ++- js/components/local_datetime.js | 10 +-- js/components/members_list.js | 53 +++++++----- js/components/multi_checkbox_input.js | 23 ++--- js/components/options_input.js | 16 ++-- js/components/requests_list.js | 72 +++++++++------- js/components/selector.js | 51 ++++++----- js/components/tables/spend_table.js | 27 +++--- js/components/tables/task_order_list.js | 45 +++++----- js/components/text_input.js | 63 ++++++++------ js/components/toggler.js | 22 ++--- js/index.js | 20 +++-- js/lib/dollars.js | 23 +++-- js/lib/input_validations.js | 81 ++++++++++++----- js/lib/viewport.js | 4 +- js/mixins/form.js | 6 +- js/mixins/modal.js | 18 ++-- 32 files changed, 553 insertions(+), 443 deletions(-) diff --git a/js/components/__tests__/confirmation_popover.test.js b/js/components/__tests__/confirmation_popover.test.js index cf31b253..bfbb06fe 100644 --- a/js/components/__tests__/confirmation_popover.test.js +++ b/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') }) }) - diff --git a/js/components/__tests__/local_datetime.test.js b/js/components/__tests__/local_datetime.test.js index 969a797e..ed9f800c 100644 --- a/js/components/__tests__/local_datetime.test.js +++ b/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(' { }) it('allows specifying a custom format', () => { - const wrapperWithCustomFormat = shallowMount( - LocalDatetime, { - propsData: { - timestamp: '1977-05-25 00:00:00', - format: 'MMM Do YY' - } - } - ) + const wrapperWithCustomFormat = shallowMount(LocalDatetime, { + propsData: { + timestamp: '1977-05-25 00:00:00', + format: 'MMM Do YY', + }, + }) expect(wrapperWithCustomFormat).toMatchSnapshot() }) }) diff --git a/js/components/__tests__/members_list.test.js b/js/components/__tests__/members_list.test.js index a386c5ce..f73bf2fc 100644 --- a/js/components/__tests__/members_list.test.js +++ b/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 = [{ - name: 'Luke Skywalker', - num_env: 2, - status: 'active', - role: 'developer' - }, { - name: 'Chewie', - num_env: 3, - status: 'pending', - role: 'admin' - }] + const members = [ + { + name: 'Luke Skywalker', + num_env: 2, + status: 'active', + role: 'developer', + }, + { + name: 'Chewie', + num_env: 3, + status: 'pending', + role: 'admin', + }, + ] const role_choices = [ { display_name: 'Developer', name: 'developer' }, { display_name: 'Admin', name: 'admin' }, @@ -23,11 +26,14 @@ describe('MembersList', () => { { display_name: 'Pending', name: 'pending' }, ] - const createWrapper = () => shallowMount(MembersList, { - propsData: { - members, role_choices, status_choices - } - }) + const createWrapper = () => + shallowMount(MembersList, { + propsData: { + members, + role_choices, + status_choices, + }, + }) it('should sort by name by default', () => { const wrapper = createWrapper() diff --git a/js/components/__tests__/requests_list.test.js b/js/components/__tests__/requests_list.test.js index eec10004..e9fa1e9d 100644 --- a/js/components/__tests__/requests_list.test.js +++ b/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 = [{ - 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' - }, { - 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' - }] + 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', + }, + { + 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', + }, + ] - 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, + ]) }) }) }) diff --git a/js/components/charts/budget_chart.js b/js/components/charts/budget_chart.js index 21e6465c..11fee9b0 100644 --- a/js/components/charts/budget_chart.js +++ b/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 () { - const heightScale = this.budget / (CHART_HEIGHT - TOP_OFFSET - BOTTOM_OFFSET) + data: function() { + 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 blockWidth = (this.width / this.numMonths) + const { + metrics, + budget, + rollingAverage, + cumulativeTotal, + } = this.displayedMonths[i] + const blockWidth = this.width / this.numMonths const blockX = blockWidth * i - const spend = budget && budget.spend - ? budget.spend - : rollingAverage + const spend = budget && budget.spend ? budget.spend : rollingAverage const barHeight = spend / this.heightScale lastSpend = spend - const cumulativeY = this.height - (cumulativeTotal / this.heightScale) - BOTTOM_OFFSET - const cumulativeX = blockX + blockWidth/2 + const cumulativeY = + 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 spendMinusTwo = this.months[indexMinusTwo] ? this.months[indexMinusTwo].spend : rollingAverage - const spendMinusThree = this.months[indexMinusThree] ? this.months[indexMinusThree].spend : rollingAverage + const spendMinusOne = this.months[indexMinusOne] + ? this.months[indexMinusOne].spend + : 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 = ( - spendAmount - + spendMinusOne - + spendMinusTwo - + spendMinusThree - ) / 4 + rollingAverage = + (spendAmount + 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 - } - } + }, + }, } diff --git a/js/components/checkbox_input.js b/js/components/checkbox_input.js index 6ed5e821..bfea50ad 100644 --- a/js/components/checkbox_input.js +++ b/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, }) - } - } + }, + }, } diff --git a/js/components/confirmation_popover.js b/js/components/confirmation_popover.js index 5bccc719..f58386ce 100644 --- a/js/components/confirmation_popover.js +++ b/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 { - ` + `, } diff --git a/js/components/forms/ccpo_approval.js b/js/components/forms/ccpo_approval.js index f286a594..20b69908 100644 --- a/js/components/forms/ccpo_approval.js +++ b/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 } }, - } + }, } diff --git a/js/components/forms/details_of_use.js b/js/components/forms/details_of_use.js index 0c11d192..74d461bd 100644 --- a/js/components/forms/details_of_use.js +++ b/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 - } - } + }, + }, } diff --git a/js/components/forms/edit_application_roles.js b/js/components/forms/edit_application_roles.js index ef7438d5..c4f6d490 100644 --- a/js/components/forms/edit_application_roles.js +++ b/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) - } - } + }, + }, } diff --git a/js/components/forms/edit_environment_role.js b/js/components/forms/edit_environment_role.js index 4bb8fb55..e9919f29 100644 --- a/js/components/forms/edit_environment_role.js +++ b/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 () { - this.new_role = "" - } + revoke: function() { + 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 () { - return this.newRole === "" ? - "label" : "label label--success" + label_class: function() { + return this.newRole === '' ? 'label' : 'label label--success' }, - newRole: function () { + newRole: function() { return this.new_role - } + }, }, } diff --git a/js/components/forms/financial.js b/js/components/forms/financial.js index cf1bd5a0..84402a85 100644 --- a/js/components/forms/financial.js +++ b/js/components/forms/financial.js @@ -17,32 +17,32 @@ export default { props: { initialData: { type: Object, - default: () => ({}) - } + default: () => ({}), + }, }, - data: function () { - const { - funding_type = "" - } = this.initialData + data: function() { + const { 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 - } - } + }, + }, } diff --git a/js/components/forms/funding.js b/js/components/forms/funding.js index cad96abc..dc1f6f46 100644 --- a/js/components/forms/funding.js +++ b/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; - }, 0 + return acc + curr + }, + 0 ) }, - totalBudgetStr: function () { - return this.formatDollars(this.totalBudget); + totalBudgetStr: function() { + 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() - } + }, } diff --git a/js/components/forms/new_application.js b/js/components/forms/new_application.js index d607b101..b9275c3b 100644 --- a/js/components/forms/new_application.js +++ b/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 () { - const { - environment_names, - name, - } = this.initialData + data: function() { + const { environment_names, name } = this.initialData - const environments = ( - environment_names.length > 0 + const environments = (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.environmentsHaveNames, message: "Environment names cannot be empty."}, + { + func: this.hasEnvironments, + 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) { - this.environments.push(createEnvironment("")) + addEnvironment: function(event) { + 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) => { - if (!validation.func()) { - return validation.message - } - }).filter(Boolean) + this.errors = this.validations + .map(validation => { + if (!validation.func()) { + return validation.message + } + }) + .filter(Boolean) }, - hasEnvironments: function () { - return this.environments.length > 0 && this.environments.some((e) => e.name !== "") + hasEnvironments: function() { + 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 () { - const names = this.environments.map((e) => e.name) + envNamesAreUnique: function() { + 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) } - } - } + }, + }, } diff --git a/js/components/forms/oversight.js b/js/components/forms/oversight.js index b9864ca7..d1613b55 100644 --- a/js/components/forms/oversight.js +++ b/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, @@ -28,10 +28,10 @@ export default { } = this.initialData return { - am_cor, - ko_invite, - cor_invite, - so_invite, + am_cor, + ko_invite, + cor_invite, + so_invite, } - } + }, } diff --git a/js/components/forms/poc.js b/js/components/forms/poc.js index 91b5dbfc..2aff00ab 100644 --- a/js/components/forms/poc.js +++ b/js/components/forms/poc.js @@ -15,17 +15,15 @@ export default { props: { initialData: { type: Object, - default: () => ({}) - } + default: () => ({}), + }, }, - data: function () { - const { - am_poc = false - } = this.initialData + data: function() { + const { am_poc = false } = this.initialData return { - am_poc + am_poc, } - } + }, } diff --git a/js/components/local_datetime.js b/js/components/local_datetime.js index eb6a5d5a..aa315ebe 100644 --- a/js/components/local_datetime.js +++ b/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: '' + template: '', } diff --git a/js/components/members_list.js b/js/components/members_list.js index 57695ad2..a48d2eb5 100644 --- a/js/components/members_list.js +++ b/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( - (member) => member.name.toLowerCase().includes(normalizedQuery) + return members.filter(member => + 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,10 +52,8 @@ const sort = (sortInfo, members) => { const sortColumn = sortInfo.columns[sortInfo.columnName] const sortedMembers = sortColumn.sortFunc(sortColumn.attr, members) - return sortInfo.isAscending ? - sortedMembers : - reverse(sortedMembers) - } + return sortInfo.isAscending ? sortedMembers : reverse(sortedMembers) + } } export default { @@ -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: '
' + template: '
', } diff --git a/js/components/multi_checkbox_input.js b/js/components/multi_checkbox_input.js index c5fc86e1..cf008326 100644 --- a/js/components/multi_checkbox_input.js +++ b/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, - otherText: this.initialValue.includes("other") ? this.initialOtherValue : '', - selections: this.initialValue + otherChecked: this.initialValue.includes('other') + ? true + : 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 }, - } + }, } diff --git a/js/components/options_input.js b/js/components/options_input.js index a04ed230..0a291b02 100644 --- a/js/components/options_input.js +++ b/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 - } - } + }, + }, } diff --git a/js/components/requests_list.js b/js/components/requests_list.js index 6f3adcb9..6112fd75 100644 --- a/js/components/requests_list.js +++ b/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 () { - const defaultSort = (sort, requests) => sortBy(prop(sort.columnName), requests) + data: function() { + 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,44 +97,41 @@ 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) - .filter((column) => !column.extendedOnly || this.isExtended) + return Object.values(this.columns).filter( + column => !column.extendedOnly || this.isExtended + ) }, applySearch: (query, requests) => { - return requests.filter( - (request) => query !== '' ? - request.name.toLowerCase().includes(query.toLowerCase()) : - true + return requests.filter(request => + query !== '' + ? request.name.toLowerCase().includes(query.toLowerCase()) + : true ) }, applyFilters: (status, dodComponent, requests) => { - return requests.filter( - (request) => status !== '' ? - request.status === status : - true - ).filter( - (request) => dodComponent !== '' ? - request.dod_component === dodComponent : - true - ) + return requests + .filter(request => (status !== '' ? request.status === status : true)) + .filter(request => + dodComponent !== '' ? request.dod_component === dodComponent : true + ) }, applySort: function(sort, requests) { if (sort.columnName === '') { @@ -129,23 +139,23 @@ export default { } else { const { sortFunc } = this.columns[sort.columnName] const sorted = sortFunc(sort, requests) - return sort.isAscending ? - sorted : - reverse(sorted) + return sort.isAscending ? 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: '
' + template: '
', } diff --git a/js/components/selector.js b/js/components/selector.js index 67f6a30f..06c1bc63 100644 --- a/js/components/selector.js +++ b/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 () { - setTimeout(() => { // timeout is a hack to make focus work in Chrome + onShow: function() { + 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() - } + }, }, } diff --git a/js/components/tables/spend_table.js b/js/components/tables/spend_table.js index 56f68b70..f8d663a3 100644 --- a/js/components/tables/spend_table.js +++ b/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],{ - isVisible: !this.applicationsState[applicationName].isVisible - }) + [applicationName]: Object.assign( + 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) - } - } + }, + }, } diff --git a/js/components/tables/task_order_list.js b/js/components/tables/task_order_list.js index d8b6cfbd..d9cc3a2f 100644 --- a/js/components/tables/task_order_list.js +++ b/js/components/tables/task_order_list.js @@ -11,10 +11,8 @@ const sort = (sortInfo, members) => { const sortColumn = sortInfo.columns[sortInfo.columnName] const sortedMembers = sortColumn.sortFunc(sortColumn.attr, members) - return sortInfo.isAscending ? - sortedMembers : - reverse(sortedMembers) - } + return sortInfo.isAscending ? sortedMembers : reverse(sortedMembers) + } } export default { @@ -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", - sortFunc: numericSort + class: 'table-cell--align-right', + sortFunc: numericSort, }, { displayName: this.expired ? 'Expired Balance' : 'Balance', attr: 'budget', - class: "table-cell--align-right", - sortFunc: numericSort + class: 'table-cell--align-right', + 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: '
' + template: '
', } diff --git a/js/components/text_input.js b/js/components/text_input.js index 7663b957..e5f21e4c 100644 --- a/js/components/text_input.js +++ b/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, - validationError: this.initialErrors.join(' ') || inputValidations[this.validation].validationError, + keepCharPositions: + inputValidations[this.validation].keepCharPositions || false, + validationError: + this.initialErrors.join(' ') || + inputValidations[this.validation].validationError, value: this.initialValue, - modified: false + modified: false, } }, - computed:{ - rawValue: function () { + computed: { + 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' - ? this.mask - : mask.mask(this.value).filter((val) => val !== '[]') + const mask = + typeof this.mask.mask !== 'function' + ? this.mask + : 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) { - return inputValidations[this.validation].unmask.reduce((currentValue, character) => { - return currentValue.split(character).join('') - }, value) + _rawValue: function(value) { + return inputValidations[this.validation].unmask.reduce( + (currentValue, character) => { + return currentValue.split(character).join('') + }, + value + ) }, - _validate: function (value) { + _validate: function(value) { return inputValidations[this.validation].match.test(this._rawValue(value)) - } - } + }, + }, } diff --git a/js/components/toggler.js b/js/components/toggler.js index ba55f168..0cd18dc8 100644 --- a/js/components/toggler.js +++ b/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) { - return createElement( this.$vnode.data.tag, [ + render: function(createElement) { + 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 - } - } + }, + }, } diff --git a/js/index.js b/js/index.js index 68b6a6e4..f5692103 100644 --- a/js/index.js +++ b/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) { - el.addEventListener('focus', function(){ + ally.query.focusable().forEach(function(el) { + el.addEventListener('focus', function() { if (isNotInVerticalViewport(el)) { - el.scrollIntoView({block: 'center'}) + el.scrollIntoView({ block: 'center' }) } }) }) }, - delimiters: ['!{', '}'] + delimiters: ['!{', '}'], }) diff --git a/js/lib/dollars.js b/js/lib/dollars.js index e1b60ac0..a65e5767 100644 --- a/js/lib/dollars.js +++ b/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 === 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 - d = c < 0 ? c : Math.abs(c), // enforce -0 is 0 - e = d + ['', 'k', 'M', 'B', 'T'][k]; // append power - return e; + if (value === null) { + return null + } // 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 + d = c < 0 ? c : Math.abs(c), // enforce -0 is 0 + e = d + ['', 'k', 'M', 'B', 'T'][k] // append power + return e } diff --git a/js/lib/input_validations.js b/js/lib/input_validations.js index 81071d2a..c8b0c897 100644 --- a/js/lib/input_validations.js +++ b/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: ['$',','], - validationError: 'Please enter a dollar amount' + unmask: ['$', ','], + 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'], - validationError: 'Please enter an amount of data in gigabytes' + unmask: [',', ' GB'], + 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: ['(',')','-',' '], - validationError: 'Please enter a 10-digit phone number' + unmask: ['(', ')', '-', ' '], + 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', }, } diff --git a/js/lib/viewport.js b/js/lib/viewport.js index afe5aa8d..22da6663 100644 --- a/js/lib/viewport.js +++ b/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 diff --git a/js/mixins/form.js b/js/mixins/form.js index 620ccfcd..e0fb546f 100644 --- a/js/mixins/form.js +++ b/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 } }, - } + }, } diff --git a/js/mixins/modal.js b/js/mixins/modal.js index b1d7a376..13c5f18d 100644 --- a/js/mixins/modal.js +++ b/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 () { - return !!this.activeModal ? `modal--${ this.activeModal }` : null - } - } + modalId: function() { + return !!this.activeModal ? `modal--${this.activeModal}` : null + }, + }, }