Revert "fix: #1801 - revert frontend change (#2657)" (#2790)

This reverts commit 470e9d6.

packages/client/src/arpa_reporter/views/Home.vue

@@ -3,44 +3,37 @@
     <div class="row">
       <AlertBox v-if="alert" :text="alert.text" :level="alert.level" v-on:dismiss="clearAlert" />
     </div>
-    <div class="row mt-5 mb-5" v-if="viewingOpenPeriod">
-      <div class="col" v-if="this.$route.query.sync_treasury_download && isAdmin">
-        <DownloadButton :href="downloadTreasuryReportURL()" class="btn btn-primary btn-block">Download Treasury Report</DownloadButton>
+
+    <div class="row border border-danger rounded m-3 mb-3 p-3" v-if="!viewingOpenPeriod">
+      <div class="col" id="closedReportingPeriodMessage">
+        This reporting period is closed.
       </div>
+    </div>
 
+    <div class="row mt-5 mb-5" v-if="viewingOpenPeriod || isAdmin">
       <div class="col" v-if="isAdmin">
         <button class="btn btn-primary btn-block" @click="sendTreasuryReport" :disabled="sending" id="sendTreasuryReportButton">
           <span v-if="sending">Sending...</span>
           <span v-else>Send Treasury Report by Email</span>
         </button>
       </div>
 
-      <div class="col" v-if="this.$route.query.sync_audit_download && isAdmin">
-        <DownloadButton :href="downloadAuditReportURL()" class="btn btn-info btn-block">Download Audit Report</DownloadButton>
-      </div>
-
       <div class="col" v-if="isAdmin">
         <button class="btn btn-info btn-block" @click="sendAuditReport" :disabled="sending" id="sendAuditReportButton">
           <span v-if="sending">Sending...</span>
           <span v-else>Send Audit Report by Email</span>
         </button>
       </div>
 
-      <div class="col">
-        <button @click.prevent="startUpload" class="btn btn-primary btn-block" id="submitWorkbookButton">Submit Workbook</button>
+      <div class="col" v-if="viewingOpenPeriod">
+        <button @click.prevent="startUpload" class="btn btn-primary btn-block" id="submitWorkbookButton"  :disabled="!viewingOpenPeriod">Submit Workbook</button>
       </div>
 
-      <div class="col">
+      <div class="col" v-if="viewingOpenPeriod">
         <DownloadTemplateBtn :block="true" />
       </div>
     </div>
 
-    <div class="row border border-danger rounded m-3 mb-3 p-3" v-else>
-      <div class="col" id="closedReportingPeriodMessage">
-        This reporting period is closed.
-      </div>
-    </div>
-
     <p id="welcomeToArpaReporter">
       Welcome to the ARPA reporter.
       To get started, click the "Download Empty Template" button, above, to get a copy of an empty template for reporting.
@@ -60,9 +53,7 @@
 </template>
 
 <script>
-import { apiURL } from '@/helpers/fetchApi';
 import AlertBox from '../components/AlertBox.vue';
-import DownloadButton from '../components/DownloadButton.vue';
 import DownloadTemplateBtn from '../components/DownloadTemplateBtn.vue';
 import { getJson } from '../store/index';
 
@@ -98,14 +89,16 @@ export default {
     clearAlert() {
       this.alert = null;
     },
-    downloadAuditReportURL() {
-      return apiURL('/api/audit_report');
-    },
     async sendAuditReport() {
       this.sending = true;
 
       try {
-        const result = await getJson('/api/audit_report?queue=true');
+        const periodId = this.$store.getters.viewPeriod.id || 0;
+        const query = new URLSearchParams({ queue: true });
+        if (periodId && !this.viewingOpenPeriod) {
+          query.set('period_id', periodId);
+        }
+        const result = await getJson(`/api/audit_report?${query}`);
 
         if (result.error) {
           this.alert = {
@@ -129,15 +122,16 @@ export default {
 
       this.sending = false;
     },
-    downloadTreasuryReportURL() {
-      const periodId = this.$store.getters.viewPeriod.id || 0;
-      return apiURL(`/api/exports?period_id=${periodId}`);
-    },
     async sendTreasuryReport() {
       this.sending = true;
 
       try {
-        const result = await getJson('/api/exports?queue=true');
+        const periodId = this.$store.getters.viewPeriod.id || 0;
+        const query = new URLSearchParams({ queue: true });
+        if (periodId && !this.viewingOpenPeriod) {
+          query.set('period_id', periodId);
+        }
+        const result = await getJson(`/api/exports?${query}`);
 
         if (result.error) {
           this.alert = {
@@ -168,7 +162,6 @@ export default {
     },
   },
   components: {
-    DownloadButton,
     DownloadTemplateBtn,
     AlertBox,
   },

packages/client/src/assets/adjust-vue-select.css

@@ -9,15 +9,3 @@
 .vs__open-indicator {
   cursor: pointer;
 }
-
-.vs__search::placeholder {
-  color: #878787;
-}
-
-.vs__dropdown-option--disabled {
-  text-transform: uppercase;
-  font-size: 12px;
-}
-.vs__dropdown-option--disabled:not(:first-child) {
-  margin-top: 12px;
-}

packages/client/tests/unit/arpa_reporter/views/Home.spec.js

@@ -39,6 +39,10 @@ describe('Home.vue', () => {
         const reportingPeriodClosed = wrapper.get('#closedReportingPeriodMessage');
         expect(reportingPeriodClosed.text()).to.include('This reporting period is closed.');
       });
+      it('should not show a download button', () => {
+        const sendTreasuryReportButton = wrapper.find('#sendTreasuryReportButton');
+        expect(sendTreasuryReportButton.exists()).to.not.true;
+      });
     });
     describe('during the reporting period', () => {
       beforeEach(() => {
@@ -108,9 +112,9 @@ describe('Home.vue', () => {
           mocks: { $route: route },
         });
       });
-      it('should show the Download Treasury Report button', () => {
-        const downloadButton = wrapper.getComponent({ name: 'DownloadButton' });
-        expect(downloadButton.text()).to.include('Download Treasury Report');
+      it('should show the Send Treasury Report button', () => {
+        const sendTreasuryReportButton = wrapper.get('#sendTreasuryReportButton');
+        expect(sendTreasuryReportButton.text()).to.include('Send Treasury Report by Email');
       });
     });
     describe('with the sync_audit_download param', () => {
@@ -129,9 +133,40 @@ describe('Home.vue', () => {
           mocks: { $route: route },
         });
       });
-      it('should show the Download Treasury Report button', () => {
-        const downloadAuditButton = wrapper.getComponent({ name: 'DownloadButton' });
-        expect(downloadAuditButton.text()).to.include('Download Audit Report');
+      it('should show the Send Treasury Report button', () => {
+        const sendTreasuryReportButton = wrapper.get('#sendTreasuryReportButton');
+        expect(sendTreasuryReportButton.text()).to.include('Send Treasury Report by Email');
+      });
+    });
+  });
+  describe('when an admin loads the home page outside the reporting period', () => {
+    describe('without query params', () => {
+      beforeEach(() => {
+        store = new Vuex.Store({
+          state: { },
+          getters: {
+            user: () => ({ role: { name: 'admin' } }),
+            viewPeriodIsCurrent: () => false,
+          },
+        });
+        route = { query: { } };
+        wrapper = shallowMount(Home, {
+          store,
+          localVue,
+          mocks: { $route: route },
+        });
+      });
+      it('should not show the submit workbook button', () => {
+        const submitWorkbookButton = wrapper.find('#submitWorkbookButton');
+        expect(submitWorkbookButton.exists()).to.not.true;
+      });
+      it('should show the Send Treasury Report by Email Button', () => {
+        const sendTreasuryReportButton = wrapper.get('#sendTreasuryReportButton');
+        expect(sendTreasuryReportButton.text()).to.include('Send Treasury Report by Email');
+      });
+      it('should show the reporting period as closed', () => {
+        const reportingPeriodClosed = wrapper.get('#closedReportingPeriodMessage');
+        expect(reportingPeriodClosed.text()).to.include('This reporting period is closed.');
       });
     });
   });