pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettier format all js files

Browse Source
This commit is contained in:
George Drummond 2019-01-24 09:38:43 -05:00
parent 20604e6ca9
commit 619bc9fe59
No known key found for this signature in database
GPG Key ID: 296DD6077123BF17
32 changed files with 553 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/components/__tests__/confirmation_popover.test.js
View File

@ -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')
})
})

15
js/components/__tests__/local_datetime.test.js
View File

@ -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(
LocalDatetime, {
const wrapperWithCustomFormat = shallowMount(LocalDatetime, {
propsData: {
timestamp: '1977-05-25 00:00:00',
format: 'MMM Do YY'
}
}
)
format: 'MMM Do YY',
},
})
expect(wrapperWithCustomFormat).toMatchSnapshot()
})
})

22
js/components/__tests__/members_list.test.js
View File

@ -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', () => {

37
js/components/__tests__/requests_list.test.js
View File

@ -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,
])
})
})
})

72
js/components/charts/budget_chart.js
View File

@ -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,23 +17,24 @@ export default {
currentMonth: String,
expirationDate: String,
months: Object,
budget: String
budget: String,
},
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)),
}
},
@ -48,15 +55,19 @@ 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 cumulativeY =
this.height - cumulativeTotal / this.heightScale - BOTTOM_OFFSET
const cumulativeX = blockX + blockWidth / 2
const cumulativePoint = `${cumulativeX} ${cumulativeY}`
@ -69,16 +80,16 @@ export default {
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
}
}
@ -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
}
}
},
},
}

6
js/components/checkbox_input.js
View File

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

4
js/components/confirmation_popover.js
View File

@ -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>
`
`,
}

8
js/components/forms/ccpo_approval.js
View File

@ -6,17 +6,17 @@ export default {
components: {
textinput,
LocalDatetime
LocalDatetime,
},
props: {
initialState: String
initialState: String,
},
data: function() {
return {
approving: this.initialState === 'approving',
denying: this.initialState === 'denying'
denying: this.initialState === 'denying',
}
},
@ -30,5 +30,5 @@ export default {
this.denying = true
}
},
}
},
}

14
js/components/forms/details_of_use.js
View File

@ -18,21 +18,21 @@ export default {
props: {
initialData: {
type: Object,
default: () => ({})
}
default: () => ({}),
},
},
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,
}
},
@ -52,13 +52,13 @@ export default {
},
hasTechnicalSupportTeam: function() {
return this.technical_support_team === 'yes'
}
},
},
methods: {
formatDollars: function(intValue) {
const mask = createNumberMask({ prefix: '$', allowDecimal: true })
return conformToMask(intValue.toString(), mask).conformedValue
}
}
},
},
}

6
js/components/forms/edit_application_roles.js
View File

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

14
js/components/forms/edit_environment_role.js
View File

@ -4,7 +4,6 @@ import Selector from '../selector'
import Modal from '../../mixins/modal'
import toggler from '../toggler'
export default {
name: 'edit-environment-role',
@ -14,13 +13,13 @@ export default {
toggler,
Modal,
Selector,
textinput
textinput,
},
props: {
choices: Array,
initialData: String,
applicationId: String
applicationId: String,
},
data: function() {
@ -41,8 +40,8 @@ export default {
this.new_role = this.initialData
},
revoke: function() {
this.new_role = ""
}
this.new_role = ''
},
},
computed: {
@ -55,11 +54,10 @@ export default {
}
},
label_class: function() {
return this.newRole === "" ?
"label" : "label label--success"
return this.newRole === '' ? 'label' : 'label label--success'
},
newRole: function() {
return this.new_role
}
},
},
}

22
js/components/forms/financial.js
View File

@ -17,32 +17,32 @@ export default {
props: {
initialData: {
type: Object,
default: () => ({})
}
default: () => ({}),
},
},
data: function() {
const {
funding_type = ""
} = this.initialData
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
}
}
},
},
}

21
js/components/forms/funding.js
View File

@ -12,18 +12,18 @@ export default {
components: {
textinput,
optionsinput
optionsinput,
},
props: {
initialData: {
type: Object,
default: () => ({})
default: () => ({}),
},
uploadErrors: {
type: Array,
default: () => ([])
}
default: () => [],
},
},
data: function() {
@ -40,7 +40,7 @@ export default {
clin_02,
clin_03,
clin_04,
showUpload: !csp_estimate || this.uploadErrors.length > 0
showUpload: !csp_estimate || this.uploadErrors.length > 0,
}
},
@ -49,12 +49,13 @@ export default {
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);
return this.formatDollars(this.totalBudget)
},
},
@ -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()
}
},
}

56
js/components/forms/new_application.js
View File

@ -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,39 +9,44 @@ 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
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,
}
},
@ -51,7 +56,7 @@ export default {
methods: {
addEnvironment: function(event) {
this.environments.push(createEnvironment(""))
this.environments.push(createEnvironment(''))
},
removeEnvironment: function(index) {
@ -61,29 +66,34 @@ export default {
},
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() {
return this.environments.length > 0 && this.environments.some((e) => e.name !== "")
return (
this.environments.length > 0 &&
this.environments.some(e => e.name !== '')
)
},
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)
const names = this.environments.map(e => e.name)
return names.every((n, index) => names.indexOf(n) === index)
},
@ -116,6 +126,6 @@ export default {
this.readyToSubmit = true
this.openModal(this.modalName)
}
}
}
},
},
}

6
js/components/forms/oversight.js
View File

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

12
js/components/forms/poc.js
View File

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

8
js/components/local_datetime.js
View File

@ -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() {
return format(this.timestamp, this.format)
}
},
},
template: '<time v-bind:datetime="timestamp">{{ displayTime }}</time>'
template: '<time v-bind:datetime="timestamp">{{ displayTime }}</time>',
}

47
js/components/members_list.js
View File

@ -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,9 +52,7 @@ 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)
}
}
@ -59,7 +67,10 @@ export default {
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,7 +112,7 @@ export default {
sortInfo: {
columnName: defaultSortColumn,
isAscending: true,
columns: indexBy(prop('displayName'), columns)
columns: indexBy(prop('displayName'), columns),
},
}
},
@ -114,7 +125,7 @@ export default {
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>',
}

19
js/components/multi_checkbox_input.js
View File

@ -13,25 +13,28 @@ export default {
name: String,
initialErrors: {
type: Array,
default: () => []
default: () => [],
},
initialValue: {
type: Array,
default: () => []
default: () => [],
},
initialOtherValue: String,
},
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,
}
},
@ -39,7 +42,7 @@ export default {
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
},
}
},
}

12
js/components/options_input.js
View File

@ -5,30 +5,28 @@ export default {
name: String,
initialErrors: {
type: Array,
default: () => []
default: () => [],
},
initialValue: String,
},
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) {
this.$root.$emit('field-change', {
value: e.target.value,
name: this.name
name: this.name,
})
this.showError = false
this.showValid = true
}
}
},
},
}

66
js/components/requests_list.js
View File

@ -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)
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,7 +97,7 @@ export default {
dodComponentValue: '',
sort: {
columnName: defaultSortColumn,
isAscending: false
isAscending: false,
},
columns: indexBy(prop('attr'), columnList),
}
@ -95,32 +108,29 @@ export default {
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) {
@ -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: '<div></div>'
template: '<div></div>',
}

27
js/components/selector.js
View File

@ -10,13 +10,13 @@ const SelectorInput = {
selected: Boolean,
handleChange: Function,
handleEnter: Function,
handleEsc: Function
handleEsc: Function,
},
computed: {
id: function() {
return `${this.name}_${this.value}`
}
},
},
methods: {
@ -30,17 +30,16 @@ const SelectorInput = {
onEsc: function(e) {
this.handleEsc()
},
},
}
}
}
export default {
name: 'selector',
components: {
VPopover,
SelectorInput
SelectorInput,
},
props: {
@ -49,8 +48,8 @@ export default {
initialErrors: Array,
initialChoice: {
type: String,
default: null
}
default: null,
},
},
data: function() {
@ -58,32 +57,32 @@ export default {
value: this.initialChoice || null,
currentChoice: this.initialChoice || null,
showError: (this.initialErrors && this.initialErrors.length) || false,
usingKeyboard: false
usingKeyboard: false,
}
},
computed: {
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) {
this.value = value
this.showError = false
},
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()
@ -113,6 +112,6 @@ export default {
handleButtonArrowDown: function(e) {
this.usingKeyboard = true
this.$refs.popover.show()
}
},
},
}

17
js/components/tables/spend_table.js
View File

@ -10,12 +10,12 @@ export default {
environments: Object,
currentMonthIndex: String,
prevMonthIndex: String,
twoMonthsAgoIndex: String
twoMonthsAgoIndex: String,
},
data: function() {
return {
applicationsState: this.applications
applicationsState: this.applications,
}
},
@ -28,9 +28,12 @@ export default {
methods: {
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,
}
),
})
},
@ -40,6 +43,6 @@ export default {
round: function(value) {
return Math.round(value)
}
}
},
},
}

37
js/components/tables/task_order_list.js
View File

@ -11,9 +11,7 @@ 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)
}
}
@ -22,16 +20,19 @@ export default {
props: {
data: Array,
expired: Boolean
expired: Boolean,
},
components: {
localDatetime
localDatetime,
},
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() {
return sort(this.sortInfo, this.data)
}
},
},
methods: {
@ -96,8 +97,8 @@ export default {
formatDollars: function(value) {
return formatDollars(value, false)
}
},
},
template: '<div></div>'
template: '<div></div>',
}

41
js/components/text_input.js
View File

@ -5,25 +5,25 @@ 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() {
@ -32,17 +32,20 @@ export default {
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() {
return this._rawValue(this.value)
}
},
},
mounted: function() {
@ -50,9 +53,10 @@ export default {
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
}
@ -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 inputValidations[this.validation].unmask.reduce(
(currentValue, character) => {
return currentValue.split(character).join('')
}, value)
},
value
)
},
_validate: function(value) {
return inputValidations[this.validation].match.test(this._rawValue(value))
}
}
},
},
}

14
js/components/toggler.js
View File

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

12
js/index.js
View File

@ -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'
@ -70,14 +69,17 @@ 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)
}
@ -89,5 +91,5 @@ const app = new Vue({
})
})
},
delimiters: ['!{', '}']
delimiters: ['!{', '}'],
})

19
js/lib/dollars.js
View File

@ -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
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
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;
e = d + ['', 'k', 'M', 'B', 'T'][k] // append power
return e
}

71
js/lib/input_validations.js
View File

@ -7,37 +7,37 @@ 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'
validationError: 'Please enter a dollar amount',
},
gigabytes: {
mask: createNumberMask({ prefix: '', suffix: ' GB', allowDecimal: false }),
match: /^[1-9]\d*$/,
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/],
@ -45,48 +45,83 @@ export default {
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'
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',
},
}

4
js/lib/viewport.js
View File

@ -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

2
js/mixins/form.js
View File

@ -10,5 +10,5 @@ export default {
this[name] = value
}
},
}
},
}

12
js/mixins/modal.js
View File

@ -14,19 +14,19 @@ export default {
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
}
}
},
},
}