web/satellite: usage report date selected date range formatted (#3518)

web/satellite/src/components/project/UsageReport.vue

@@ -42,7 +42,7 @@
                 </div>
             </div>
             <div class="usage-report-container__main-area__footer">
-                <p class="usage-report-container__main-area__footer__rollup-info">Roll Up Period <b class="usage-report-container__main-area__footer__rollup-info__bold-text">{{toLocaleDateString(startDate)}}</b> to <b class="usage-report-container__main-area__footer__rollup-info__bold-text">{{toLocaleDateString(endDate)}}</b></p>
+                <p class="usage-report-container__main-area__footer__rollup-info">Roll Up Period <b class="usage-report-container__main-area__footer__rollup-info__bold-text">{{startDate}}</b> to <b class="usage-report-container__main-area__footer__rollup-info__bold-text">{{endDate}}</b></p>
                 <div class="usage-report-container__main-area__footer__report-area">
                     <p class="usage-report-container__main-area__footer__report-area__download-text">Download Advanced Report</p>
                     <DownloadReportIcon
@@ -66,6 +66,7 @@ import DownloadReportIcon from '@/../static/images/project/downloadReport.svg';
 import { RouteConfig } from '@/router';
 import { PROJECT_USAGE_ACTIONS } from '@/store/modules/usage';
 import { DateRange } from '@/types/usage';
+import { DateFormat } from '@/utils/datepicker';
 import { toUnixTimestamp } from '@/utils/time';
 
 @Component({
@@ -95,12 +96,12 @@ export default class UsageReport extends Vue {
         };
     }
 
-    public get startDate(): Date {
-        return this.$store.state.usageModule.startDate;
+    public get startDate(): string {
+        return DateFormat.getUSDate(this.$store.state.usageModule.startDate, '/');
     }
 
-    public get endDate(): Date {
-        return this.$store.state.usageModule.endDate;
+    public get endDate(): string {
+        return DateFormat.getUSDate(this.$store.state.usageModule.endDate, '/');
     }
 
     public get storage(): string {

web/satellite/src/utils/datepicker.ts

@@ -198,3 +198,23 @@ export class DateGenerator {
         }
     }
 }
+
+/**
+ * DateFormat is utils class for date formatting to string
+ */
+export class DateFormat {
+
+    /**
+     * getUSDate transforms date into US date format string
+     * @param date - Date to format
+     * @param separator - symbol for joining date string
+     * @returns formatted date string
+     */
+    public static getUSDate(date: Date, separator: string): string {
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        const year = date.getFullYear();
+
+        return [month, day, year].join(separator);
+    }
+}

web/satellite/tests/unit/utils/datepicker.spec.ts

@@ -2,6 +2,7 @@
 // See LICENSE for copying information.
 
 import {
+    DateFormat,
     DateGenerator,
     DateStamp,
     DayItem,
@@ -77,4 +78,18 @@ describe('datepicker', () => {
         expect(days[0].equals(firstExpectedDay.moment)).toBe(true);
         expect(days[days.length - 1].equals(lastExpectedDay.moment)).toBe(true);
     });
+
+    it('DateFormat formats date to string correctly', () => {
+        const testDate1 = new Date(2019, 10, 7);
+        const testDate2 = new Date(2019, 1, 1);
+
+        const expectedResult1 = '11/7/2019';
+        const expectedResult2 = '2-1-2019';
+
+        const actualResult1 = DateFormat.getUSDate(testDate1, '/');
+        const actualResult2 = DateFormat.getUSDate(testDate2, '-');
+
+        expect(actualResult1).toBe(expectedResult1);
+        expect(actualResult2).toBe(expectedResult2);
+    });
 });