Fix history-compact.vue error on parsing date. (#9794)

* Fix history-compact.vue error on parsing date. * FIx in a different way. * Don't need to check if date is available. As it always should. * yarn dev * lint
pymedusa · Aug 14, 2021 · fd54644 · fd54644
1 parent 2a56d45
commit fd54644
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 11 deletions.
diff --git a/themes-default/slim/src/components/history-compact.vue b/themes-default/slim/src/components/history-compact.vue
@@ -47,16 +47,16 @@
                             <img style="margin-right: 5px;"
                                  :src="`images/providers/${row.provider.imageName}`"
                                  :alt="row.provider.name" width="16" height="16"
-                                 v-tooltip.right="`${row.provider.name}: ${row.resource} (${row.actionDate})`"
+                                 v-tooltip.right="`${row.provider.name}: ${row.resource} (${fuzzyParseDateTime(convertDateFormat(row.actionDate))})`"
                                  onError="this.onerror=null;this.src='images/providers/missing.png';"
                             >
-                            <img v-if="row.manuallySearched" src="images/manualsearch.png" width="16" height="16" style="vertical-align:middle;" v-tooltip.right="`Manual searched episode: ${row.resource} (${row.actionDate})`">
-                            <img v-if="row.properTags" src="images/info32.png" width="16" height="16" style="vertical-align:middle;" v-tooltip.right="`${row.properTags.split(/[ |]+/).join(', ')}: ${row.resource} (${row.actionDate})`">
+                            <img v-if="row.manuallySearched" src="images/manualsearch.png" width="16" height="16" style="vertical-align:middle;" v-tooltip.right="`Manual searched episode: ${row.resource} (${fuzzyParseDateTime(convertDateFormat(row.actionDate))})`">
+                            <img v-if="row.properTags" src="images/info32.png" width="16" height="16" style="vertical-align:middle;" v-tooltip.right="`${row.properTags.split(/[ |]+/).join(', ')}: ${row.resource} (${fuzzyParseDateTime(convertDateFormat(row.actionDate))})`">
 
                         </template>
                         <img v-else-if="row.statusName ==='Failed'" src="images/no16.png"
                              width="16" height="16" style="vertical-align:middle;"
-                             v-tooltip.right="`${row.provider.name} download failed: ${row.resource} (${fuzzyParseDateTime(row.actionDate)})`"
+                             v-tooltip.right="`${row.provider.name} download failed: ${row.resource} (${fuzzyParseDateTime(convertDateFormat(row.actionDate))})`"
                         >
                     </div>
                 </span>
@@ -107,6 +107,8 @@ import { manageCookieMixin } from '../mixins/manage-cookie';
 import QualityPill from './helpers/quality-pill.vue';
 import AppLink from './helpers/app-link.vue';
 import { VTooltip } from 'v-tooltip';
+import parse from 'date-fns/parse';
+import formatDate from 'date-fns/format';
 
 export default {
     name: 'history-compact',
@@ -291,6 +293,15 @@ export default {
             const { getHistory } = this;
             console.log(this.serverParams);
             getHistory(this.serverParams);
+        },
+        /**
+         * Re-format date.
+         * @param {number} date - Date formatted as a number.
+         * @returns {string} - Formatted date as a string.
+         */
+        convertDateFormat(date) {
+            const dateObj = parse(date, 'yyyyMMddHHmmss', new Date()); // Example: 20210813162256
+            return formatDate(dateObj, 'yyyy-MM-dd HH:mm:ss');
         }
     }
 };

diff --git a/themes-default/slim/src/store/modules/config/layout.js b/themes-default/slim/src/store/modules/config/layout.js
@@ -85,7 +85,6 @@ const getters = {
 
         // Only the history page should show seconds.
         const formatTimeStyle = showSeconds ? timeStyle : timeStyle.replace(':%S', '');
-
         const fdate = parseISO(airDate);
         return formatDate(fdate, convertDateFormat(`${dateStyle} ${formatTimeStyle}`));
     },