diff --git a/js/components/__tests__/requests_list.test.js b/js/components/__tests__/requests_list.test.js deleted file mode 100644 index e9fa1e9d..00000000 --- a/js/components/__tests__/requests_list.test.js +++ /dev/null @@ -1,86 +0,0 @@ -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 }, - }) - 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 }, - }) - expect(wrapper.vm.sort.columnName).toEqual('last_submission_timestamp') - wrapper.vm.updateSortValue('full_name') - expect(wrapper.vm.sort.columnName).toEqual('full_name') - }) - }) - - 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 mountWrapper = () => - shallowMount(RequestsList, { propsData: { requests, isExtended: true } }) - - it('should default to sorting by submission recency', () => { - const wrapper = mountWrapper() - const displayedRequests = wrapper.vm.filteredRequests - const requestNames = displayedRequests.map(req => req.name) - expect(requestNames).toEqual(['TIE Fighter', 'X Wing']) - }) - - it('should reverse sort by submission time when selected', () => { - const wrapper = mountWrapper() - wrapper.vm.updateSortValue('last_submission_timestamp') - const displayedRequests = wrapper.vm.filteredRequests - const requestNames = displayedRequests.map(req => req.name) - expect(requestNames).toEqual(['X Wing', 'TIE Fighter']) - }) - - it('handles sorting with un-submitted requests', () => { - const unsubmittedRequest = { - name: 'Death Star', - status: 'Started', - last_submission_timestamp: null, - } - const wrapper = shallowMount(RequestsList, { - propsData: { - requests: [unsubmittedRequest, ...requests], - isExtended: true, - }, - }) - const displayedRequests = wrapper.vm.filteredRequests - expect(displayedRequests).toEqual([ - requests[1], - requests[0], - unsubmittedRequest, - ]) - }) - }) -}) diff --git a/js/components/forms/ccpo_approval.js b/js/components/forms/ccpo_approval.js deleted file mode 100644 index 20b69908..00000000 --- a/js/components/forms/ccpo_approval.js +++ /dev/null @@ -1,34 +0,0 @@ -import textinput from '../text_input' -import LocalDatetime from '../local_datetime' - -export default { - name: 'ccpo-approval', - - components: { - textinput, - LocalDatetime, - }, - - props: { - initialState: String, - }, - - data: function() { - return { - approving: this.initialState === 'approving', - denying: this.initialState === 'denying', - } - }, - - methods: { - setReview: function(e) { - if (e.target.value === 'approving') { - this.approving = true - this.denying = false - } else { - this.approving = false - this.denying = true - } - }, - }, -} diff --git a/js/components/forms/details_of_use.js b/js/components/forms/details_of_use.js deleted file mode 100644 index 74d461bd..00000000 --- a/js/components/forms/details_of_use.js +++ /dev/null @@ -1,64 +0,0 @@ -import createNumberMask from 'text-mask-addons/dist/createNumberMask' -import { conformToMask } from 'vue-text-mask' - -import FormMixin from '../../mixins/form' -import textinput from '../text_input' -import optionsinput from '../options_input' - -export default { - name: 'details-of-use', - - mixins: [FormMixin], - - components: { - textinput, - optionsinput, - }, - - props: { - initialData: { - type: Object, - default: () => ({}), - }, - }, - - data: function() { - const { - estimated_monthly_spend = 0, - jedi_migration = '', - technical_support_team = '', - } = this.initialData - - return { - estimated_monthly_spend, - jedi_migration, - technical_support_team, - } - }, - - computed: { - annualSpend: function() { - const monthlySpend = this.estimated_monthly_spend || 0 - return monthlySpend * 12 - }, - annualSpendStr: function() { - return this.formatDollars(this.annualSpend) - }, - jediMigrationOptionSelected: function() { - return this.jedi_migration !== '' - }, - isJediMigration: function() { - return this.jedi_migration === 'yes' - }, - hasTechnicalSupportTeam: function() { - return this.technical_support_team === 'yes' - }, - }, - - methods: { - formatDollars: function(intValue) { - const mask = createNumberMask({ prefix: '$', allowDecimal: true }) - return conformToMask(intValue.toString(), mask).conformedValue - }, - }, -} diff --git a/js/components/forms/financial.js b/js/components/forms/financial.js deleted file mode 100644 index 84402a85..00000000 --- a/js/components/forms/financial.js +++ /dev/null @@ -1,48 +0,0 @@ -import FormMixin from '../../mixins/form' -import optionsinput from '../options_input' -import textinput from '../text_input' -import localdatetime from '../local_datetime' - -export default { - name: 'financial', - - mixins: [FormMixin], - - components: { - optionsinput, - textinput, - localdatetime, - }, - - props: { - initialData: { - type: Object, - default: () => ({}), - }, - }, - - data: function() { - const { funding_type = '' } = this.initialData - - return { - funding_type, - shouldForceShowTaskOrder: false, - } - }, - - computed: { - showTaskOrderUpload: function() { - return ( - !this.initialData.legacy_task_order.pdf || this.shouldForceShowTaskOrder - ) - }, - }, - - methods: { - forceShowTaskOrderUpload: function(e) { - console.log('forceShowTaskOrder', e) - e.preventDefault() - this.shouldForceShowTaskOrder = true - }, - }, -} diff --git a/js/components/requests_list.js b/js/components/requests_list.js deleted file mode 100644 index 6112fd75..00000000 --- a/js/components/requests_list.js +++ /dev/null @@ -1,161 +0,0 @@ -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' - -export default { - name: 'requests-list', - - components: { - LocalDatetime, - }, - - props: { - requests: { - type: Array, - default: () => [], - }, - isExtended: { - type: Boolean, - default: false, - }, - statuses: { - type: Array, - default: () => [], - }, - dodComponents: { - type: Array, - default: () => [], - }, - }, - - data: function() { - const defaultSort = (sort, requests) => - sortBy(prop(sort.columnName), requests) - const dateSort = (sort, requests) => { - const parseDate = compose( - partial(parse), - propOr(sort.columnName, '') - ) - return sortBy(parseDate, requests) - } - - const columnList = [ - { - displayName: 'JEDI Cloud Request Name', - attr: 'name', - sortFunc: defaultSort, - }, - { - displayName: 'Date Request Submitted', - attr: 'last_submission_timestamp', - sortFunc: dateSort, - }, - { - displayName: 'Date Request Last Edited', - attr: 'last_edited_timestamp', - extendedOnly: true, - sortFunc: dateSort, - }, - { - displayName: 'Requester', - attr: 'full_name', - extendedOnly: true, - sortFunc: defaultSort, - }, - { - displayName: 'Applicationed Annual Usage ($)', - attr: 'annual_usage', - sortFunc: defaultSort, - }, - { - displayName: 'Request Status', - attr: 'status', - sortFunc: defaultSort, - }, - { - displayName: 'DOD Component', - attr: 'dod_component', - extendedOnly: true, - sortFunc: defaultSort, - }, - ] - - const defaultSortColumn = this.isExtended ? 'last_submission_timestamp' : '' - return { - searchValue: '', - statusValue: '', - dodComponentValue: '', - sort: { - columnName: defaultSortColumn, - isAscending: false, - }, - columns: indexBy(prop('attr'), columnList), - } - }, - - computed: { - filteredRequests: function() { - return pipe( - partial(this.applySearch, [this.searchValue]), - partial(this.applyFilters, [this.statusValue, this.dodComponentValue]), - partial(this.applySort, [this.sort]) - )(this.requests) - }, - }, - - methods: { - getColumns: function() { - 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 - ) - }, - applyFilters: (status, dodComponent, requests) => { - return requests - .filter(request => (status !== '' ? request.status === status : true)) - .filter(request => - dodComponent !== '' ? request.dod_component === dodComponent : true - ) - }, - applySort: function(sort, requests) { - if (sort.columnName === '') { - return requests - } else { - const { sortFunc } = this.columns[sort.columnName] - const sorted = sortFunc(sort, requests) - return sort.isAscending ? sorted : reverse(sorted) - } - }, - dollars: value => formatDollars(value, false), - updateSortValue: function(columnName) { - 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 - }, - }, - - template: '
', -} diff --git a/js/index.js b/js/index.js index fbdd5814..dbc72654 100644 --- a/js/index.js +++ b/js/index.js @@ -11,11 +11,9 @@ import optionsinput from './components/options_input' import multicheckboxinput from './components/multi_checkbox_input' import textinput from './components/text_input' import checkboxinput from './components/checkbox_input' -import DetailsOfUse from './components/forms/details_of_use' import EditOfficerForm from './components/forms/edit_officer_form' import poc from './components/forms/poc' import oversight from './components/forms/oversight' -import financial from './components/forms/financial' import toggler from './components/toggler' import NewApplication from './components/forms/new_application' import EditEnvironmentRole from './components/forms/edit_environment_role' @@ -27,10 +25,8 @@ import selector from './components/selector' import BudgetChart from './components/charts/budget_chart' import SpendTable from './components/tables/spend_table' import TaskOrderList from './components/tables/task_order_list.js' -import CcpoApproval from './components/forms/ccpo_approval' 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 DateSelector from './components/date_selector' @@ -51,21 +47,17 @@ const app = new Vue({ multicheckboxinput, textinput, checkboxinput, - DetailsOfUse, poc, oversight, - financial, NewApplication, selector, BudgetChart, SpendTable, TaskOrderList, - CcpoApproval, MembersList, LocalDatetime, EditEnvironmentRole, EditApplicationRoles, - RequestsList, ConfirmationPopover, funding, uploadinput,