add user avatar to app bar

timesketch/frontend-v3/package.json

@@ -13,7 +13,8 @@
     "dayjs": "^1.11.13",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
-    "vuetify": "^3.6.11"
+    "vuetify": "^3.6.11",
+    "axios": "^1.7.7"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",

timesketch/frontend-v3/src/filters.js

@@ -0,0 +1,22 @@
+/*
+Copyright 2024 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const initialLetter = (input) => {
+  if (!input) return '';
+  input = input.toString();
+  return input.charAt(0).toUpperCase();
+};
+

timesketch/frontend-v3/src/layouts/AppBar.vue

@@ -29,17 +29,30 @@ limitations under the License.
       >
       </v-img>
     </template>
-    <template v-slot:append> Right hand side </template>
+    <template v-slot:append>
+      <v-avatar color="grey lighten-1" size="25" class="ml-3">
+        <span class="white--text">{{ $filters.initialLetter(currentUser) }}</span>
+      </v-avatar>
+    </template>
   </v-toolbar>
   <v-divider></v-divider>
 </template>
 
 <script>
+import ApiClient from '../utils/RestApiClient.js'
 export default {
   data() {
-    return {};
+    return {
+      currentUser: '',
+    };
   },
   computed: {},
   methods: {},
+  created: function () {
+    ApiClient.getLoggedInUser().then((response) => {
+      let currentUser = response.data.objects[0].username;
+      this.currentUser = currentUser;
+    });
+  },
 };
 </script>

timesketch/frontend-v3/src/main.js

@@ -10,6 +10,8 @@ import { registerPlugins } from "@/plugins";
 // Components
 import App from "./App.vue";
 
+import {initialLetter} from "./filters.js";
+
 // Composables
 import { createApp } from "vue";
 
@@ -18,3 +20,7 @@ const app = createApp(App);
 registerPlugins(app);
 
 app.mount("#app");
+
+app.config.globalProperties.$filters = {
+  initialLetter
+}