refactor: use methods instead of filters

app/src/components/QueryHeader.vue

@@ -31,8 +31,8 @@
     </BButton>
 
     <!-- TIME DISPLAY -->
-    <time v-if="showTime" :datetime="request.date | hour" :class="request.error ? 'ml-2' : 'ml-auto'">
+    <time v-if="showTime" :datetime="hour(request.date)" :class="request.error ? 'ml-2' : 'ml-auto'">
-      {{ request.date | hour }}
+      {{ hour(request.date) }}
     </time>
   </div>
 </template>
@@ -71,12 +71,6 @@ export default {
   methods: {
     reviewError () {
       this.$store.dispatch('REVIEW_ERROR', this.request)
-    }
-  },
-
-  filters: {
-    readableUri (uri) {
-      return uri.split('?')[0].split('/').join(' > ') // replace('/', ' > ')
     },
 
     hour (date) {

app/src/views/app/AppInfo.vue

@@ -287,7 +287,6 @@ import { mapGetters } from 'vuex'
 import { validationMixin } from 'vuelidate'
 
 import api, { objectToParams } from '@/api'
-import { readableDate } from '@/helpers/filters/date'
 import { humanPermissionName } from '@/helpers/filters/human'
 import { required } from '@/helpers/validators'
 import { isEmptyValue } from '@/helpers/commons'
@@ -542,7 +541,6 @@ export default {
     }
   },
 
-  filters: { readableDate },
   mixins: [validationMixin]
 }
 </script>

app/src/views/backup/BackupInfo.vue

@@ -22,8 +22,8 @@
           <strong>{{ $t(prop === 'name' ? 'id' : prop) }}</strong>
         </BCol>
         <BCol>
-          <span v-if="prop === 'created_at'">{{ value | readableDate }}</span>
+          <span v-if="prop === 'created_at'">{{ readableDate(value) }}</span>
-          <span v-else-if="prop === 'size'">{{ value | humanSize }}</span>
+          <span v-else-if="prop === 'size'">{{ humanSize(value) }}</span>
           <span v-else>{{ value }}</span>
         </BCol>
       </BRow>
@@ -60,7 +60,7 @@
           >
             <div class="mr-2">
               <h5 class="font-weight-bold">
-                {{ item.name }} <small class="text-secondary" v-if="item.size">({{ item.size | humanSize }})</small>
+                {{ item.name }} <small class="text-secondary" v-if="item.size">({{ humanSize(item.size) }})</small>
               </h5>
               <p class="m-0">
                 {{ item.description }}
@@ -77,7 +77,7 @@
           >
             <div class="mr-2">
               <h5 class="font-weight-bold">
-                {{ item.name }} <small class="text-secondary">{{ appName }} ({{ item.size | humanSize }})</small>
+                {{ item.name }} <small class="text-secondary">{{ appName }} ({{ humanSize(item.size) }})</small>
               </h5>
               <p class="m-0">
                 {{ $t('version') }} {{ item.version }}
@@ -235,10 +235,8 @@ export default {
     downloadBackup () {
       const host = this.$store.getters.host
       window.open(`https://${host}/yunohost/api/backups/${this.name}/download`, '_blank')
-    }
+    },
-  },
 
-  filters: {
     readableDate,
     humanSize
   }

app/src/views/backup/BackupList.vue

@@ -13,13 +13,13 @@
       <BListGroupItem
         v-for="{ name, created_at, path, size } in archives" :key="name"
         :to="{ name: 'backup-info', params: { name, id }}"
-        :title="created_at | readableDate"
+        :title="readableDate(created_at)"
         class="d-flex justify-content-between align-items-center pr-0"
       >
         <div>
           <h5 class="font-weight-bold">
-            {{ created_at | distanceToNow }}
+            {{ distanceToNow(created_at) }}
-            <small class="text-secondary">{{ name }} ({{ size | humanSize }})</small>
+            <small class="text-secondary">{{ name }} ({{ humanSize(size) }})</small>
           </h5>
           <p class="mb-0">
             {{ path }}
@@ -62,10 +62,8 @@ export default {
       } else {
         this.archives = null
       }
-    }
+    },
-  },
 
-  filters: {
     distanceToNow,
     readableDate,
     humanSize

app/src/views/diagnosis/DiagnosisView.vue

@@ -47,7 +47,7 @@
 
       <!-- REPORT BODY -->
       <p class="last-time-run">
-        {{ $t('last_ran') }} {{ report.timestamp | distanceToNow(true, true) }}
+        {{ $t('last_ran') }} {{ distanceToNow(report.timestamp, true, true) }}
       </p>
 
       <BListGroup flush>
@@ -197,10 +197,10 @@ export default {
       api.get('diagnosis?share').then(({ url }) => {
         window.open(url, '_blank')
       })
-    }
+    },
-  },
 
-  filters: { distanceToNow }
+    distanceToNow
+  }
 }
 </script>
 

app/src/views/service/ServiceInfo.vue

@@ -37,7 +37,7 @@
               <YIcon :iname="value === 'running' ? 'check-circle' : 'times'" />
               {{ $t(value) }}
             </span>
-            {{ $t('since') }} {{ uptime | distanceToNow }}
+            {{ $t('since') }} {{ distanceToNow(uptime ) }}
           </template>
 
           <span v-else-if="key === 'start_on_boot'" :class="value === 'enabled' ? 'text-success' : 'text-danger'">
@@ -143,10 +143,10 @@ export default {
       }).then(({ key }) => {
         window.open('https://paste.yunohost.org/' + key, '_blank')
       })
-    }
+    },
-  },
 
-  filters: { distanceToNow }
+    distanceToNow
+  }
 }
 </script>
 

app/src/views/service/ServiceList.vue

@@ -24,7 +24,7 @@
               <YIcon :iname="status === 'running' ? 'check-circle' : 'times'" />
               {{ $t(status) }}
             </span>
-            {{ $t('since') }} {{ last_state_change | distanceToNow }}
+            {{ $t('since') }} {{ distanceToNow(last_state_change) }}
           </p>
         </div>
 
@@ -70,10 +70,10 @@ export default {
         }
         return { ...service, name }
       })
-    }
+    },
-  },
 
-  filters: { distanceToNow }
+    distanceToNow
+  }
 }
 </script>
 

app/src/views/tool/ToolLog.vue

@@ -14,7 +14,7 @@
         </BCol>
 
         <BCol>
-          <span v-if="prop.endsWith('_at')">{{ value | readableDate }}</span>
+          <span v-if="prop.endsWith('_at')">{{ readableDate(value) }}</span>
 
           <div v-else-if="prop === 'suboperations'">
             <div v-for="operation in value" :key="operation.name">
@@ -137,9 +137,9 @@ export default {
       ).then(({ url }) => {
         window.open(url, '_blank')
       })
-    }
+    },
-  },
 
-  filters: { readableDate }
+    readableDate
+  }
 }
 </script>

app/src/views/tool/ToolLogs.vue

@@ -13,9 +13,9 @@
         <BListGroupItem
           v-for="log in filteredOperations" :key="log.name"
           :to="{ name: 'tool-log', params: { name: log.name || log.log_path } }"
-          :title="log.started_at | readableDate"
+          :title="readableDate(log.started_at)"
         >
-          <small class="mr-3">{{ log.started_at | distanceToNow }} </small>
+          <small class="mr-3">{{ distanceToNow(log.started_at) }} </small>
           <YIcon :iname="log.icon" :class="'text-' + log.class" />
           {{ log.description }}
         </BListGroupItem>
@@ -66,10 +66,8 @@ export default {
         }
       })
       this.operations = operation
-    }
+    },
-  },
 
-  filters: {
     distanceToNow,
     readableDate
   }