From 28a972cf300dc5897f768000f0e67c8b9a62e14c Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 5 Oct 2020 16:54:54 -0400
Subject: [PATCH] Move last access to user detail sidebar

Closes #471
---
 app/src/lang/en-US/index.json                 |  2 +-
 .../components/user-info-drawer-detail.vue    | 26 +++++++++++++++----
 app/src/modules/users/routes/detail.vue       |  2 +-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 19ad908d0a..ff6723bf35 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -341,7 +341,7 @@
 	"related_values": "Related Values",
 
 	"last_page": "Last Page",
-	"last_login": "Last Login",
+	"last_access": "Last Access",
 
 	"fill_template": "Fill with Template Value",
 
diff --git a/app/src/modules/users/components/user-info-drawer-detail.vue b/app/src/modules/users/components/user-info-drawer-detail.vue
index 936ce695ca..488d929ff4 100644
--- a/app/src/modules/users/components/user-info-drawer-detail.vue
+++ b/app/src/modules/users/components/user-info-drawer-detail.vue
@@ -11,9 +11,9 @@
 					<router-link :to="user.last_page">{{ user.last_page }}</router-link>
 				</dd>
 			</div>
-			<div v-if="user.last_login">
-				<dt>{{ $t('last_login') }}</dt>
-				<dd>{{ user.last_login }}</dd>
+			<div v-if="user.last_access">
+				<dt>{{ $t('last_access') }}</dt>
+				<dd>{{ lastAccessDate }}</dd>
 			</div>
 			<div v-if="user.created_on">
 				<dt>{{ $t('created_on') }}</dt>
@@ -36,8 +36,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, ref, watch } from '@vue/composition-api';
 import marked from 'marked';
+import localizedFormat from '../../../utils/localized-format';
+import i18n from '../../../lang';
 
 export default defineComponent({
 	props: {
@@ -51,7 +53,21 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		return { marked };
+		const lastAccessDate = ref('');
+
+		watch(
+			props,
+			async () => {
+				if (!props.user) return;
+				lastAccessDate.value = await localizedFormat(
+					new Date(props.user.last_access),
+					String(i18n.t('date-fns_date_short'))
+				);
+			},
+			{ immediate: true }
+		);
+
+		return { marked, lastAccessDate };
 	},
 });
 </script>
diff --git a/app/src/modules/users/routes/detail.vue b/app/src/modules/users/routes/detail.vue
index 205c5c1289..623b80a52f 100644
--- a/app/src/modules/users/routes/detail.vue
+++ b/app/src/modules/users/routes/detail.vue
@@ -270,11 +270,11 @@ export default defineComponent({
 			'id',
 			'external_id',
 			'last_page',
-			'last_login',
 			'created_on',
 			'created_by',
 			'modified_by',
 			'modified_on',
+			'last_access',
 		];
 
 		const fieldsFiltered = computed(() => {