feat: admin edit user - activity panel

client/components/admin/admin-users-edit.vue

@@ -148,7 +148,7 @@
                       v-tooltip(top)
                         template(v-slot:activator='{ on: tooltip }')
                           v-btn(icon, color='grey', x-small, v-on='{ ...menu, ...tooltip }', @click='focusField(`iptNewPassword`)')
-                            v-icon mdi-cached
+                            v-icon mdi-pencil
                         span {{$t('admin:users.changePassword')}}
                     v-card
                       v-text-field(
@@ -267,7 +267,7 @@
             v-divider
             v-list-item
               v-list-item-avatar(size='32')
-                v-icon mdi-account-badge-horizontal-outline
+                v-icon mdi-briefcase
               v-list-item-content
                 v-list-item-title {{$t('admin:users.jobTitle')}}
                 v-list-item-subtitle {{ user.jobTitle }}
@@ -324,8 +324,21 @@
                       @keydown.enter='editPop.timezone = false'
                       @keydown.esc='editPop.timezone = false'
                     )
+
         v-card.mt-3.animated.fadeInUp.wait-p4s
-          v-toolbar(color='primary', dense, dark, flat)
+          v-toolbar(color='teal', dark, dense, flat)
+            v-toolbar-title
+              .subtitle-1 {{$t('profile:activity.title')}}
+          v-card-text.grey--text.text--darken-2
+            .caption.grey--text {{$t('profile:activity.joinedOn')}}
+            .body-2: strong {{ user.createdAt | moment('LLLL') }}
+            .caption.grey--text.mt-3 {{$t('profile:activity.lastUpdatedOn')}}
+            .body-2: strong {{ user.updatedAt | moment('LLLL') }}
+            .caption.grey--text.mt-3 {{$t('profile:activity.lastLoginOn')}}
+            .body-2: strong {{ user.lastLoginAt | moment('LLLL') }}
+
+        v-card.mt-3.animated.fadeInUp.wait-p6s
+          v-toolbar(color='teal', dense, dark, flat)
             v-icon.mr-2 mdi-file-document-box-multiple-outline
             span Content
           v-card-text
@@ -351,10 +364,12 @@ import gql from 'graphql-tag'
 
 import { StatusIndicator } from 'vue-status-indicator'
 
-import userQuery from 'gql/admin/users/users-query-single.gql'
 import groupsQuery from 'gql/admin/users/users-query-groups.gql'
 
 export default {
+  i18nOptions: {
+    namespaces: ['admin', 'profile']
+  },
   components: {
     StatusIndicator
   },
@@ -884,7 +899,32 @@ export default {
   },
   apollo: {
     user: {
-      query: userQuery,
+      query: gql`
+        query ($id: Int!) {
+          users {
+            single(id: $id) {
+              id
+              name
+              email
+              providerKey
+              providerId
+              location
+              jobTitle
+              timezone
+              isSystem
+              isActive
+              isVerified
+              createdAt
+              updatedAt
+              lastLoginAt
+              groups {
+                id
+                name
+              }
+            }
+          }
+        }
+      `,
       variables() {
         return {
           id: _.toSafeInteger(this.$route.params.id)

client/components/profile.vue

@@ -3,25 +3,24 @@
     nav-header
     v-navigation-drawer.pb-0(v-model='profileDrawerShown', app, fixed, clipped, left, permanent)
       v-list(dense, nav)
-        v-list-item(to='/profile')
+        v-list-item(to='/profile', color='primary')
           v-list-item-action: v-icon mdi-face-profile
           v-list-item-content
-            v-list-item-title Profile
+            v-list-item-title {{$t('profile:title')}}
         //- v-list-item(to='/preferences', disabled)
         //-   v-list-item-action: v-icon(color='grey lighten-1') mdi-cog-outline
         //-   v-list-item-content
         //-     v-list-item-title Preferences
         //-     v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
-        v-list-item(to='/pages', disabled)
-          v-list-item-action: v-icon(color='grey lighten-1') mdi-file-document
+        v-list-item(to='/pages', color='primary')
+          v-list-item-action: v-icon mdi-file-document-outline
           v-list-item-content
-            v-list-item-title Pages
-            v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
-        v-list-item(to='/comments', disabled)
-          v-list-item-action: v-icon(color='grey lighten-1') mdi-message-reply-text
-          v-list-item-content
-            v-list-item-title Comments
-            v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
+            v-list-item-title {{$t('profile:pages.title')}}
+        //- v-list-item(to='/comments', disabled)
+        //-   v-list-item-action: v-icon(color='grey lighten-1') mdi-message-reply-text
+        //-   v-list-item-content
+        //-     v-list-item-title {{$t('profile:comments.title')}}
+        //-     v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
 
     v-content
       transition(name='profile-router')

client/components/profile/pages.vue

@@ -2,9 +2,11 @@
   v-container(fluid, fill-height, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
-        .headline.primary--text Pages
-        .subheading.grey--text List of pages I created or contributed
-
+        .profile-header
+          img.animated.fadeInUp(src='/svg/icon-file.svg', alt='Users', style='width: 80px;')
+          .profile-header-title
+            .headline.primary--text.animated.fadeInLeft {{$t('profile:pages.title')}}
+            .subheading.grey--text.animated.fadeInLeft {{$t('profile:pages.subtitle')}}
 </template>
 
 <script>

client/components/profile/profile.vue

@@ -12,7 +12,7 @@
           //-   v-icon(left) mdi-earth
           //-   span {{$t('profile:viewPublicProfile')}}
       v-flex(lg6 xs12)
-        v-card
+        v-card.animated.fadeInUp
           v-toolbar(color='primary', dark, dense, flat)
             v-toolbar-title.subtitle-1 {{$t('profile:myInfo')}}
           v-list(two-line, dense)
@@ -117,32 +117,43 @@
                   v-model='editPop.timezone'
                   :close-on-content-click='false'
                   min-width='350'
+                  max-width='350'
                   left
                   )
                   template(v-slot:activator='{ on }')
                     v-btn(text, color='grey', small, v-on='on', @click='focusField(`iptTimezone`)')
                       v-icon(left) mdi-pencil
                       span {{ $t('common:actions:edit') }}
-                  v-card
+                  v-card(flat)
                     v-select(
                       ref='iptTimezone'
                       :items='timezones'
                       v-model='user.timezone'
                       :label='$t(`profile:timezone`)'
                       solo
+                      flat
                       dense
                       hide-details
-                      append-icon='mdi-check'
-                      @click:append='editPop.timezone = false'
                       @keydown.enter='editPop.timezone = false'
                       @keydown.esc='editPop.timezone = false'
+                      style='height: 44px;'
                     )
+                    v-card-chin
+                      v-spacer
+                      v-btn(
+                        small
+                        text
+                        color='primary'
+                        @click='editPop.timezone = false'
+                        )
+                        v-icon(left) mdi-check
+                        span {{$t('common:actions.ok')}}
           v-card-chin
             v-spacer
             v-btn.px-4(color='success', depressed, @click='saveProfile', :loading='saveLoading')
               v-icon(left) mdi-content-save
               span {{$t('common:actions.save')}}
-        v-card.mt-3
+        v-card.mt-3.animated.fadeInUp.wait-p2s
           v-toolbar(color='primary', dark, dense, flat)
             v-toolbar-title
               .subtitle-1 {{$t('profile:auth.title')}}
@@ -209,7 +220,7 @@
         //-       v-img(:src='picture.url')
         //-     v-btn(outlined).mx-4 Upload Picture
         //-     v-btn(outlined, disabled) Remove Picture
-        v-card
+        v-card.animated.fadeInUp.wait-p2s
           v-toolbar(color='primary', dark, dense, flat)
             v-toolbar-title
               .subtitle-1 {{$t('profile:groups.title')}}
@@ -221,7 +232,7 @@
                 v-list-item-content
                   v-list-item-title.body-2 {{grp}}
               v-divider(v-if='idx < user.groups.length - 1')
-        v-card.mt-3
+        v-card.mt-3.animated.fadeInUp.wait-p3s
           v-toolbar(color='teal', dark, dense, flat)
             v-toolbar-title
               .subtitle-1 {{$t('profile:activity.title')}}
@@ -249,6 +260,9 @@ import validate from 'validate.js'
 import PasswordStrength from '../common/password-strength.vue'
 
 export default {
+  i18nOptions: {
+    namespaces: ['profile', 'auth']
+  },
   components: {
     PasswordStrength
   },

client/graph/admin/users/users-query-single.gql

@@ -1,23 +0,0 @@
-query ($id: Int!) {
-  users {
-    single(id: $id) {
-      id
-      name
-      email
-      providerKey
-      providerId
-      location
-      jobTitle
-      timezone
-      isSystem
-      isActive
-      isVerified
-      createdAt
-      updatedAt
-      groups {
-        id
-        name
-      }
-    }
-  }
-}

server/graph/schemas/user.graphql

@@ -122,6 +122,7 @@ type User {
   timezone: String!
   createdAt: Date!
   updatedAt: Date!
+  lastLoginAt: Date
   groups: [Group]!
 }