front/salix/components/log/index.html

@@ -48,8 +48,8 @@
                             #{{::log.changedModelId}}
                         </span>
                     </td>
-                    <td class="date">
+                    <td class="date" title="{{::log.creationDate | date:'dd/MM/yyyy HH:mm'}}">
-                        {{::log.creationDate | date:'dd/MM/yyyy HH:mm'}}
+                        {{::$ctrl.relativeDate(log.creationDate)}}
                     </td>
                 </tr>
                 <tr class="change-detail">

front/salix/components/log/index.js

@@ -33,6 +33,10 @@ export default class Controller extends Section {
                 },
             }],
         };
+        this.dateFilter = this.$filter('date');
+        this.lang = this.$translate.use();
+        this.today = Date.vnNew();
+        this.today.setHours(0, 0, 0, 0);
     }
 
     get logs() {
@@ -82,6 +86,27 @@ export default class Controller extends Section {
         changesEl.classList.toggle('expanded', force);
     }
 
+    relativeDate(dateVal) {
+        const date = new Date(dateVal);
+        const dateZeroTime = new Date(dateVal);
+        dateZeroTime.setHours(0, 0, 0, 0);
+        const diff = Math.trunc((this.today.getTime() - dateZeroTime.getTime()) / (1000 * 3600 * 24));
+
+        let format;
+        if (diff == 0)
+            format = `'${this.$t('today')}'`;
+        else if (diff == 1)
+            format = `'${this.$t('yesterday')}'`;
+        else if (diff >= 2 && diff <= 5)
+            format = `'${date.toLocaleDateString(this.lang, {weekday: 'short'})}'`;
+        else if (this.today.getFullYear() == date.getFullYear())
+            format = `dd/MM`;
+        else
+            format = `dd/MM/yyyy`;
+
+        return this.dateFilter(date, `${format} HH:mm`);
+    }
+
     showWorkerDescriptor(event, workerId) {
         if (!workerId) return;
         this.$.workerDescriptor.show(event.target, workerId);

front/salix/components/log/locale/es.yml

@@ -14,3 +14,5 @@ System: Sistema
 note: nota
 Changes: Cambios
 No changes: No hay cambios
+today: hoy
+yesterday: ayer

front/salix/components/log/style.scss

@@ -37,6 +37,12 @@ vn-log {
                     &.action > .chip {
                         display: inline-block;
                     }
+                    &.date {
+                        color: $color-font-secondary;
+                        text-transform: capitalize;
+                        font-style: italic;
+                        font-size: .9em;
+                    }
                 }
                 &.change-header > td {
                     padding-bottom: 0;
@@ -53,7 +59,7 @@ vn-log {
                 width: 90px;
             }
             &.date {
-                width: 120px;
+                width: 115px;
                 text-align: right;
             }
         }