Merge pull request #3681 from thelounge/xpaw/remove-vue-filter

Remove the only use of Vue.filter

client/components/Message.vue

@@ -8,7 +8,7 @@
 		:data-type="message.type"
 		:data-from="message.from && message.from.nick"
 	>
-		<span :aria-label="message.time | localetime" class="time tooltipped tooltipped-e"
+		<span :aria-label="messageTimeLocale" class="time tooltipped tooltipped-e"
 			>{{ messageTime }}
 		</span>
 		<template v-if="message.type === 'unhandled'">
@@ -78,6 +78,7 @@
 
 <script>
 const constants = require("../js/constants");
+import localetime from "../js/helpers/localetime";
 import dayjs from "dayjs";
 import Username from "./Username.vue";
 import LinkPreview from "./LinkPreview.vue";
@@ -106,6 +107,9 @@ export default {
 
 			return dayjs(this.message.time).format(format);
 		},
+		messageTimeLocale() {
+			return localetime(this.message.time);
+		},
 		messageComponent() {
 			return "message-" + this.message.type;
 		},

client/components/MessageTypes/topic_set_by.vue

@@ -2,11 +2,12 @@
 	<span class="content">
 		Topic set by
 		<Username :user="message.from" />
-		on {{ message.when | localetime }}
+		on {{ messageTimeLocale }}
 	</span>
 </template>
 
 <script>
+import localetime from "../../js/helpers/localetime";
 import Username from "../Username.vue";
 
 export default {
@@ -18,5 +19,10 @@ export default {
 		network: Object,
 		message: Object,
 	},
+	computed: {
+		messageTimeLocale() {
+			return localetime(this.message.when);
+		},
+	},
 };
 </script>

client/components/MessageTypes/whois.vue

@@ -90,18 +90,19 @@
 
 			<template v-if="message.whois.logonTime">
 				<dt>Connected at:</dt>
-				<dd>{{ message.whois.logonTime | localetime }}</dd>
+				<dd>{{ localetime(message.whois.logonTime) }}</dd>
 			</template>
 
 			<template v-if="message.whois.idle">
 				<dt>Idle since:</dt>
-				<dd>{{ message.whois.idleTime | localetime }}</dd>
+				<dd>{{ localetime(message.whois.idleTime) }}</dd>
 			</template>
 		</dl>
 	</span>
 </template>
 
 <script>
+import localetime from "../../js/helpers/localetime";
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
@@ -115,5 +116,10 @@ export default {
 		network: Object,
 		message: Object,
 	},
+	methods: {
+		localetime(date) {
+			return localetime(date);
+		},
+	},
 };
 </script>

client/components/Session.vue

@@ -12,7 +12,7 @@
 					<em>Currently active</em>
 				</p>
 				<p v-else>
-					Last used on <time>{{ session.lastUse | localetime }}</time>
+					Last used on <time>{{ lastUse }}</time>
 				</p>
 			</template>
 		</div>
@@ -26,6 +26,7 @@
 </template>
 
 <script>
+import localetime from "../js/helpers/localetime";
 import Auth from "../js/auth";
 import socket from "../js/socket";
 
@@ -34,6 +35,11 @@ export default {
 	props: {
 		session: Object,
 	},
+	computed: {
+		lastUse() {
+			return localetime(this.session.lastUse);
+		},
+	},
 	methods: {
 		signOut() {
 			if (!this.session.current) {

client/components/Special/ListBans.vue

@@ -11,18 +11,25 @@
 			<tr v-for="ban in channel.data" :key="ban.hostmask">
 				<td class="hostmask">{{ ban.hostmask }}</td>
 				<td class="banned_by">{{ ban.banned_by }}</td>
-				<td class="banned_at">{{ ban.banned_at | localetime }}</td>
+				<td class="banned_at">{{ localetime(ban.banned_at) }}</td>
 			</tr>
 		</tbody>
 	</table>
 </template>
 
 <script>
+import localetime from "../../js/helpers/localetime";
+
 export default {
 	name: "ListBans",
 	props: {
 		network: Object,
 		channel: Object,
 	},
+	methods: {
+		localetime(date) {
+			return localetime(date);
+		},
+	},
 };
 </script>

client/components/Special/ListIgnored.vue

@@ -9,18 +9,25 @@
 		<tbody>
 			<tr v-for="user in channel.data" :key="user.hostmask">
 				<td class="hostmask">{{ user.hostmask }}</td>
-				<td class="when">{{ user.when | localetime }}</td>
+				<td class="when">{{ localetime(user.when) }}</td>
 			</tr>
 		</tbody>
 	</table>
 </template>
 
 <script>
+import localetime from "../../js/helpers/localetime";
+
 export default {
 	name: "ListIgnored",
 	props: {
 		network: Object,
 		channel: Object,
 	},
+	methods: {
+		localetime(date) {
+			return localetime(date);
+		},
+	},
 };
 </script>

client/components/Special/ListInvites.vue

@@ -11,18 +11,25 @@
 			<tr v-for="invite in channel.data" :key="invite.hostmask">
 				<td class="hostmask">{{ invite.hostmask }}</td>
 				<td class="invitened_by">{{ invite.invited_by }}</td>
-				<td class="invitened_at">{{ invite.invited_at | localetime }}</td>
+				<td class="invitened_at">{{ localetime(invite.invited_at) }}</td>
 			</tr>
 		</tbody>
 	</table>
 </template>
 
 <script>
+import localetime from "../../js/helpers/localetime";
+
 export default {
 	name: "ListInvites",
 	props: {
 		network: Object,
 		channel: Object,
 	},
+	methods: {
+		localetime(date) {
+			return localetime(date);
+		},
+	},
 };
 </script>

client/js/vue.js

@@ -5,13 +5,10 @@ const constants = require("./constants");
 import Vue from "vue";
 import store from "./store";
 import App from "../components/App.vue";
-import localetime from "./helpers/localetime";
 import storage from "./localStorage";
 import {router, navigate} from "./router";
 import socket from "./socket";
 
-Vue.filter("localetime", localetime);
-
 import "./socket-events";
 import "./webpush";
 import "./keybinds";