Adding an animation to the workday waiver holidays table when switchi…

…ng contents (#1015)

* Adding min-width to date column

* Fixing workday waiver tests in case the preferences are not as expected

* Adding animation to table clear in workday waiver

__tests__/__renderer__/workday-waiver.js

@@ -36,6 +36,10 @@ const {
     getRegions,
     getStates
 } = require('../../main/workday-waiver-aux.js');
+const {
+    defaultPreferences,
+    savePreferences,
+} = require('../../js/user-preferences.js');
 
 jest.mock('../../renderer/i18n-translator.js', () => ({
     translatePage: jest.fn().mockReturnThis(),
@@ -134,6 +138,12 @@ describe('Test Workday Waiver Window', function()
 {
     process.env.NODE_ENV = 'test';
 
+    beforeAll(() =>
+    {
+        // Making sure the preferences are the default so the tests work as expected
+        savePreferences(defaultPreferences);
+    });
+
     describe('Adding new waivers update the db and the page', function()
     {
         beforeEach(async() =>
@@ -466,8 +476,6 @@ describe('Test Workday Waiver Window', function()
         {
             const day = 'test day';
             const reason = 'test reason';
-            const workingDay = undefined;
-            const conflicts = undefined;
             addHolidayToList(day, reason);
             const table = $('#holiday-list-table tbody');
             const rowsLength = table.find('tr').length;
@@ -488,7 +496,6 @@ describe('Test Workday Waiver Window', function()
             const day = 'test day';
             const reason = 'test reason';
             const workingDay = 'No';
-            const conflicts = undefined;
             addHolidayToList(day, reason, workingDay);
             const table = $('#holiday-list-table tbody');
             const rowsLength = table.find('tr').length;
@@ -538,12 +545,12 @@ describe('Test Workday Waiver Window', function()
             addHolidayToList('test day', 'no reason');
         });
 
-        test('Clear table by ID', () =>
+        test('Clear table by JQuery object', () =>
         {
             const tableId = 'waiver-list-table';
             let rowLength = $(`#${tableId} tbody tr`).length;
             expect(rowLength).toBe(2);
-            clearTable(tableId);
+            clearTable($(`#${tableId}`));
             rowLength = $(`#${tableId} tbody tr`).length;
             expect(rowLength).toBe(0);
         });

css/styles.css

@@ -739,6 +739,10 @@ input:disabled + .slider {
   width: 100%;
 }
 
+#workday-waiver-window .list-date-header {
+  min-width: 80px;
+}
+
 #workday-waiver-window a.nav-link:not(.active) {
   color: var(--page-color);
   border-bottom: 1px solid var(--tab-waiver-border);

src/workday-waiver.html

@@ -94,7 +94,7 @@
                     <table id="holiday-list-table">
                         <thead>
                             <tr>
-                                <th data-i18n="$WorkdayWaiver.date">Date</th>
+                                <th class="list-date-header" data-i18n="$WorkdayWaiver.date">Date</th>
                                 <th data-i18n="$WorkdayWaiver.holiday">Holiday</th>
                                 <th data-i18n="$WorkdayWaiver.on-working-day">On working day</th>
                                 <th data-i18n="$WorkdayWaiver.conflicts">Conflicts?</th>
@@ -124,7 +124,7 @@
                 <thead>
                     <tr>
                         <th></th>
-                        <th data-i18n="$WorkdayWaiver.day">Day</th>
+                        <th class="list-date-header" data-i18n="$WorkdayWaiver.day">Day</th>
                         <th data-i18n="$WorkdayWaiver.waiver-reason">Waiver Reason</th>
                         <th data-i18n="$WorkdayWaiver.hours-waived">Hours Waived</th>
                     </tr>

src/workday-waiver.js

@@ -298,7 +298,12 @@ async function iterateOnHolidays(func)
 
 function addHolidayToList(day, reason, workingDay, conflicts)
 {
-    const table = $('#holiday-list-table tbody')[0],
+    addHolidayToTable($('#holiday-list-table'), day, reason, workingDay, conflicts);
+}
+
+function addHolidayToTable(tableObj, day, reason, workingDay, conflicts)
+{
+    const table = $(tableObj).find('tbody')[0],
         row = table.insertRow(table.rows.length),
         dayCell = row.insertCell(0),
         reasonCell = row.insertCell(1),
@@ -319,17 +324,17 @@ function addHolidayToList(day, reason, workingDay, conflicts)
 
 function clearHolidayTable()
 {
-    clearTable('holiday-list-table');
+    clearTable($('#holiday-list-table'));
 }
 
 function clearWaiverList()
 {
-    clearTable('waiver-list-table');
+    clearTable($('#waiver-list-table'));
 }
 
-function clearTable(id)
+function clearTable(tableObj)
 {
-    const table = $(`#${id} tbody`)[0];
+    const table = $(tableObj).find('tbody')[0];
     // Clear all rows before adding new ones
     while (table.rows.length >= 1)
     {
@@ -339,15 +344,15 @@ function clearTable(id)
 
 async function loadHolidaysTable()
 {
-    const holidays = getHolidays();
+    const holidays = await getHolidays();
     if (holidays.length === 0)
     {
+        // Clear table if no holidays are found
+        $('#holiday-list-table').fadeOut(200);
+        toggleAddButton('holiday-button', false);
         return;
     }
 
-    // Clear all rows before adding new ones
-    clearHolidayTable();
-
     // Fill in reasons to check for conflicts
     const store = await window.mainApi.getWaiverStoreContents();
     const reasonByDate = {};
@@ -358,17 +363,27 @@ async function loadHolidaysTable()
         reasonByDate[date] = reason;
     }
 
+    // We'll create a table html object and replace the existing one once it's ready so we don't have a visual delay
+    const oldTable = $('#holiday-list-table');
+    const newTable = oldTable.clone();
+    clearTable(newTable);
+
     async function addHoliday(holidayDate, holidayReason)
     {
         const [tempYear, tempMonth, tempDay] = getDateFromISOStr(holidayDate);
         // Holiday returns month with 1-12 index, but showDay expects 0-11
         const workingDay = window.mainApi.showDay(tempYear, tempMonth - 1, tempDay, userPreferences) ? getTranslation('$WorkdayWaiver.yes') : getTranslation('$WorkdayWaiver.no');
-        addHolidayToList(holidayDate, holidayReason, workingDay, reasonByDate[holidayDate] ?? '');
+        addHolidayToTable(newTable, holidayDate, holidayReason, workingDay, reasonByDate[holidayDate] ?? '');
     }
 
     await iterateOnHolidays(addHoliday);
-    // Show table and enable button
-    $('#holiday-list-table').show();
+
+    // Replace tables and enable button
+    $(oldTable).fadeOut(100, function()
+    {
+        $(this).html(newTable.html()).fadeIn(100);
+    });
+    await $(oldTable).promise();
     toggleAddButton('holiday-button', true);
 }
 
@@ -454,6 +469,14 @@ $(async() =>
     {
         loadHolidaysTable();
     });
+    $('#year').on('change', function()
+    {
+        const hasCountry = $('#country').val() !== '--';
+        if (hasCountry)
+        {
+            loadHolidaysTable();
+        }
+    });
 
     translatePage(languageData.language, languageData.data, 'WorkdayWaiver');
 });