V3 user avatar app bar (#3236)

* Initial Vue3/Vuetify3 scaffold * Cleanup * Scaffold update * add user avatar to app bar * remove yarn.lock --------- Co-authored-by: Johan Berggren <[email protected]>
google · Dec 1, 2024 · 12f441f · 12f441f
1 parent 990a228
commit 12f441f
Show file tree

Hide file tree

Showing 6 changed files with 12,523 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "axios": "^1.7.7"
+  }
+}
diff --git a/timesketch/frontend-ng/yarn.lock b/timesketch/frontend-ng/yarn.lock
diff --git a/timesketch/frontend-v3/package.json b/timesketch/frontend-v3/package.json
@@ -8,13 +8,13 @@
     "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "axios": "^1.7.7",
     "@mdi/font": "7.4.47",
     "core-js": "^3.37.1",
     "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",

diff --git a/timesketch/frontend-v3/src/filters.js b/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();
+};
+
diff --git a/timesketch/frontend-v3/src/layouts/AppBar.vue b/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>
diff --git a/timesketch/frontend-v3/src/main.js b/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
+}